Modul Design Web I 2017

Paulus Harsadi S.Kom, M.
Kom
keshigomu.paul@gmail.com paulusharsadi.com
BAB I
Konsep Dasar Pemrograman Internet
&
HTML Basic
Pemrograman Internet
Perkembangan internet di dunia saat ini sangatlah cepat dan luas menembus kesegala
bidang. Internet berasal dari kata Interconnection Networking yang mempunyai arti
hubungan dari berbagai komputer dengan membentuk sistem jaringan yang mencakup
seluruh dunia atau disebut dengan jaringan komputer global.
Pemrograman internet sendiri bisa di artikan sebagai pemrograman untuk aplikasi yang
berbasis internet. Arti pemrograman itu sendiri adalah suatu kumpulan urutan perintah ke
komputer untuk mengerjakan sesuatu, dimana instruksi tersebut menggunakan bahasa
yang dimengerti oleh komputer atau yang dikenal dengan bahasa pemrograman,
sedangkan Aplikasi internet merupakan suatu jenis aplikasi yang menerapkan arsitektur
sistem terdistribusi dengan menggunakan internet sebagai media komunikasi antar
komponennya.
Jenis arsitektur sistem terdistribusi antara lain :

 Client-server: sistem dibagi menjadi komponen yang berfungsi sebagai peminta
layanan (client) dan pemberi layanan (server)
 Peer-to-peer: sistem terdiri atas komponnen - komponen yang fungsinya setara dan
dapat saling melayani atau meminta layanan
Pada prinsipnya, arsitektur peer-to-peer juga merupakan arsitektur client-server di
mana setiap komponennya dapat mempunyai fungsi sebagai client sekaligus server
terhadap komponen lain
Internet sendiri merupakan sebuah jaringan komputer yang sangat besar (meliputi
seluruh dunia) dan jaringan besar ini menghubungkan jaringan-jaringan kecil. Internet
menggunakan protokol (aturan komunikasi) transmisi berbasis TCP/IP. Selain protocol
transmisi, internet juga menerapkan protocol aplikasi contohnya protocol HTTP untuk
Web.
World Wide Web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di
mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang
disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan
Design Web 1 / STMIK Sinar Nusantara Page 1
Paulus Harsadi S.Kom, M.Kom
Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya.
Bagaimana Web Bekerja ?
Alur permintaan halaman Web oleh user :

 user mengetik URL di browser
 browser menghubungi server yang tersebut pada URL
 setelah terhubung, browser mengirimkan HTTP request
 server menjawab dengan mengirim HTTP response (berisi
 header dan isi dokumen)
 untuk dokumen yang terdiri atas beberapa file (misalnya dokumen bergambar),
browser harus mengirimkan HTTP request lagi untuk setiap file
 browser menampilkan semua isi dokumen kepada user
Dalam kerja web yang paling utama adalah protocol HTTP. HTTP (HyperText Transfer
Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam
World Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan
generik yang dapat dipergunakan berbagai macam tipe dokumen.
Pengembangan HTTP dikoordinasi oleh Konsorsium World Wide Web (W3C) dan
grup bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi satu
seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP
yang digunakan umum sekarang ini.
HTTP adalah sebuah protokol meminta/menjawab antara client dan server. Sebuah
client HTTP seperti web browser, biasanya memulai permintaan dengan membuat
hubungan TCP/IP ke port tertentu di tuan rumah yang jauh (biasanya port 80).
Pemrograman Berbasis Web
Pemrograman berbasis web pada dasarnya adalah sama dengan pemrograman internet
tetapi lebih spesifik lagi hanya mempelajari pemrograman yang menggunakan protocol
HTTP atau aplikasi web.

Saat ini pemrograman web dibagi menjadi 2 kelompok, yaitu :

 client side programming (HTML, CSS, Javascript, Jscript, VBScript)
 server side programming (PHP,ASP,JavaServelet, SGI, Perl)
Perbedaan utama server-side programming dan client server programming adalah
tempat mengeksekusi skripnya. Pada client server programming, skrip dieksekusi di
browser sedangkan server side programming dieksekusi di client (web browser)
Karakteristik client –side scripting :

1. Kode program didownload bersama dengan halaman web
2. Bersifat interpreter dan diterjemahkan oleh browser
3. Model eksekusinya simple dan skrip dapat dijadikan satu dengan HTML
Karakteristik server side programming :

1. Ada client yang meminta request
2. Eksekusi program dilakukan di server
3. Mengirimkan hasil ke client
Keuntungan server side programming :

1. Cross platform : tidak tergantung dengan browser tertentu
2. Optimasi danpemeliharaan dilakukan di browser
3. Dapat mengakses database dan tidak tergantung dengan keamanan
4. Menambah kekuatan server
5. Kode program aman
Aplikasi yang sering digunakan oleh server side programming
1. Search engines
2. Database access
3. Chat & bulletin board service
Terkait dengan kebutuhan user yang ingin web yang lebih interaktif, nyaman, cepat dan
mudah digunakan, maka saat ini munculah teknik pemrograman baru disebut AJAX
(Asynchronous JavaScript And XML). Dikenal juga dengan istilah Web 2.0. Pasti anda
tertarik mempelajarinya. Sebab dengan teknik ini sebagian besar interaksi pada
computer webserver, melakukan pertukaran data dengan server dibelakang layar
sehingga halaman web dapat tidak harus dibaca ulang setiap kali pengguna melakukan
perubahan.

HTML (Hypertext Mark-up Language)
HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula
dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan
secara luas untuk menampilkan halaman web dan HTML kini merupakan standar
Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).. Untuk
mudahnya,
HTML pada dasarnya berupa kode - kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan.
Ciri – ciri dokumen html :

 Ekstensi file berupa .htm atau .html
 Non case sensitive.
 Terdiri atas tag - tag pembuka dan penutup (walaupun ada beberapa tag
 yang tidak memiliki penutup).
 Tag- tag saling berpasangan & bersarang
Program Editor Html

Untuk membuat dokumen HTML, anda perlu mengetahui dan mempelajari tag-tag
yang digunakan untuk menandai bagian-bagian dari suatu dokumen HTML. Anda
dapat menggunakan program editor teks biasa seperti Notepad untuk aplikasi
Windows atau Sidekick dan WordStar dalam format Non Document untuk aplikasi
DOS.
Semua dokumen HTML harus disimpan sebagai file teks murni. Ada dua macam
ekstensi file yang dapat digunakan, yaitu ekstensi file “.html” ( untuk sistem operasi
UNIX atau WINDOWS 95) atau “.htm” ( untuk sistem operasi DOS/WINDOWS 3.x)

Buka Notepad kemudian tulis source code diatas lalu Simpanlah file tersebut dengan
meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu
klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files
(*.*). Setelah itu, isilah kotak File name dengan nama file yang anda inginkan
misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang nama
file! Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web.
Struktur Dokumen Html

Dalam dokumen HTML, elemen dibagi menjadi tiga kategori utama, yaitu :
1. Elemen <HTML> yang menyatakan suatu dokumen HTML

2. Elemen-elemen <HEAD> yang memberikan informasi tentang dokumen tersebut,
seperti judul dokumen atau hubungannya dengan dokumen lain
3. Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen
ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain.
Struktur dokumen HTML terlihat seperti berikut ini :
<HTML>
<HEAD>
*** Bagian HEAD ***
</HEAD>
<BODY>
*** Bagian BODY ***
</BODY>
</HTML>
A. ELEMEN HEAD
Tidak semua tag dapat diletakan dibagian HEAD. Tag-tag yang hanya boleh
diletakan di bagian HEAD adalah :
1. TITLE
 Judul dari dokumen. Tag ini mutlak diperlukan dalam semua dokumen
HTML.
Sewaktu membuat judul, sebaiknya tidak menuliskan judul lebih dari 64 karakter
 Contoh :
<HTML>
<HEAD>
<TITLE>Home Pribadi Saya</TITLE>
</HEAD>
</HTML>

2. BASE
Menyatakan URL asal dari suatu dokumen
 Base menyediakan suatu jalur pencarian bagi dokumen-dokumen atau
gambar yang mempunyai hubungan dengan dokumen dari pengguna tag BASE
tersebut.
 Contoh :
<HTML>
<HEAD>
<BASE HREF=Http://www.ina.com/homepage.html>
</HEAD>
</HTML>
3. ISINDEX
 Digunakan untuk menyatakan bahwa server dapat melakukan pencarian dalam
dokumen
 <ISINDEX> memberitahukan browser untuk membuat suatu bentuk pencarian

sederhana dimana pemakai dapat memasukan satu atau lebih variabel
pencarian.
 Contoh :
<HTML>
<HEAD>
<BASE HREF=Http://www.ina.com/homepage.html>
<ISINDEX>
</HEAD>
<BODY>
*** isi dokumen html anda
</BODY>
</HTML>
4. LINK
 Menyatakan hubungan antara dokumen dengan dokumen lainnya
 <LINK> juga digunakan untuk menyatakan pengarang, indeks dan
istilah,
sebelumdokumen
atau sesudahnya, dan lain-lain.
 <LINK> merupakan suatu tag tunggal karena tidak mempunyai tag
akhir </LINK>,
sebabnya itu berada pada bagian < HEAD>
<LINK>
 Berikut ini adalah atribut yang bisa digunakan pada tag <LINK>, yaitu :

 HREF Menunjuk pada dokumen atau bagian dokumen yang

tersebut dituju oleh LINK

 REL Menyatakan hubungan antara dokumen saat ini dengan
nilai pada HREF
 REV Seperti REL menyatakan hubungan antara dokumen saat
ini dengan nilai pada HREF, hanya saja dalam hubungan
yang berlawanan dengan REL
 NAME Menyatakan suatu link dari suatu anchor atau URL ke
dokumen ini
 URN Menyatakan suatu Uniform Resource Number untuk
dokumen saat ini
 TITLE Seperti tag <TITLE> befungsi sebagai judul

 METHODS Menampilkan fungsi-fungsi yang didukung oleh dokumen
saat ini, bagaimana ia bisa dilihat oleh suatu browser
Contoh :
<HTML>
<HEAD>
<TITLE>Contoh LINK</TITLE>
<BASE HREF=”http://www.link.com/contoh_link.html”>
<LINK HREF=”welcome.html” REL=”precedes”>
<LINK HREF=”welcome.html” TITLE=”Selamat Datang”>
<LINK REV=”made” HREF=”mailto:sampurna@hotmail.com”>
<LINK REV=”previous” HREF=”informasi.html”>
<LINK REV=”next” HREF=”pesan.html”>
</HEAD>
</HTML>
5. META
 Menyatakan meta-information ( informasi tentang suatu informasi ) dalam suatu
dokumen
 META mempunyai tiga buah atribut, yaitu :
 NAME Merupakan informasi untuk suatu dokumen, bukan sebagai judul

dokumen
 HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon
protokol tertentu
 CONTENT Isi dari nama suatu meta atau respon yang dibuat oleh HTTP-
EQUIV
 Contoh potongan program :

<META HTTP-EQUIV=”Expires” CONTENT=”10 Jul 1996”>

<META HTTP-EQUIV=”Refresh” CONTENT=”7”>
<META NAME=”GENERATOR” CONTENT=”Internet Assistant for
Microsoft Word
2.0z”>
6. NEXTID
 Digunakan oleh editor HTML untuk membuat pengenal unik untuk
7. dokumen tersebut
STYLE Mendefinisikan style untuk elemen-elemen HTML
B. ELEMEN BODY
Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh
atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan
pada browser. Atribut BODY beserta fungsinya, yaitu :
1. ALINK : Menyatakan warna dari link yang sedang aktif
2. BACKGROUND : Menyatakan file gambar yang digunakan sebagai latar
belakang
3. BGCOLOR : Menyatakan warna yang digunakan sebagai latar belakang
4. BGPROPERTIES : Jika di set fixed, membuat suatu watermark yaitu background
tetap
5. LEFTMARGIN : Mengatur margin kiri dari isi dokumen dengan ukuran pixel
6. LINK : warna dari link yang belum pernah dikunjungi
7. TEXT : Mengatur warna teks dokumen web
8. TOPMARGIN : Mengatur margin atas dari isi dokumen dengan ukuran pixel
9. VLINK : Warna link yang pernah dikunjungi
Tabel warna yang digunakan pada dokumen HTML yang menggunakan kode
heksadesimal atau nama dari RGB :
WARNA NOMOR HEXADESIMAL

Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFFF

Berikut program untuk menentukan warna background suatu dokumen :

<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
C. TAG
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu
elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-
tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan :
1. Tag awal, dinyatakan dalam bentuk <nama tag>
2. Tag akhir, dinyatakan dalam bentuk </nama tag>
Format : <nama tag> teks yang ditampilkan </nama tag>

Contoh : untuk menampilkan teks dalam format teks miring
<I>Teks ini terlihat miring di browser
anda</I>
Tidak semua tag mengikuti aturan diatas. Ada beberapa macam bentuk tag yang
dikenal oleh HTML, dimana umumnya tag-tag dalam dokumen HTML muncul dalam
bentuk seperti barikut ini :
1. <nama_elemen>teks</nama_elemen>
 Contoh : <TITLE>Home Page Saya</TITLE>
 Tag yang umum dipaki dalam suatu dokumen HTML, yaitu tag yang
mempunyai awal dan akhir
2. <nama_elemen>
 Contoh : <HR>
 Tag tersebut disebut dengan tag tunggal, yaitu tag yang hanya terdiri dari tag
awal saja tanpa disertai dengan tag akhir.
3. <nama_elemen nama_atribut=argumen>teks</nama_elemen>
 Contoh : <A HREF=’http://www.microsoft.com/”>Microsoft Page</A>
 Tag yang disertai dengan suatu atribut didalamnya. Banyak elemen dari
suatu tag mempunyai argumen-argumen yang mengirimkan parameter
pada browser yang menangani elemen ini. Argumen-argumen dari
elemen ini disebut atribut elemen.
 Contohnya adalah elemen Anchor (<A>) yang mempunyai beberapa atribut,

salah satunya adalah HREF yang menyatakan dokumen atau link yang
dihubungkan dengan teks yang mengandung anchor tersebut.
D. ATRIBUT
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari
tag tersebut. Misalnya : <P ALIGN=”left”> digunakan untuk membuat rata kiri
suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya
adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right
atau justify.
Dalam HTML, nilai atribut dalam pasangan tanda petik ganda, kecuali jika :
 Nilai merupakan suatu kumpulan dari nilai tertentu ( misalnya dalam

<P ALIGN=”left”> tanda petik ganda boleh dihilangkan, maka penulisan
boleh <P ALIGN=left> ).
 Nilai hanya berisi angka, huruf dan titik (dalam <IMG
SRC=”picture/hiasan.gif” ALT=”Menampilkan hiasan”>, kedua nilai tersebut
memerlukan tanda petik ganda karena SRC mengandung tanda “/” dan ALT
mengandung spasi ).
Pengolahan Huruf
Kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi
untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic)
atau memberi garis bawah (underline). Buka lagi program Notepad kemudian
tuliskan seperti berikut ini:
<HTML>
<HEAD>
<TITLE>Tipe-tipe Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam
penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan
tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua
tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan
tebal dan bergaris bawah atau tulisan miring dan bergaris bawah.
Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung
menjadi satu berupa tulisan tebal, miring dan bergaris bawah.
</BODY>
</HTML>
Simpanlah file tersebut. Setelah file tersimpan, bukalah file tersebut dengan program
Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut
masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata

dan kalimat yang ada di situ sehingga menjadi seperti ini:
Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5),
kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah <B> untuk
menebalkan (bold) tulisan, <I> untuk memiringkan (italic) tulisan dan <U> untuk
menggaris-bawahi (underline) tulisan:
<HTML>
<HEAD>
<TITLE>Tipe-tipe Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam
penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan
<B>tebal</B>, tulisan <I>miring</I> dan tulisan <U>bergaris
bawah</U>. Bisa pula dua tipe huruf dipadukan misalnya tulisan
<B><I>tebal dan miring</B></I>, tulisan <B><U>tebal dan bergaris
bawah</B></U> atau tulisan <I><U>miring
dan bergaris bawah</I></U>. Bahkan bisa pula ketiga tipe tulisan
tersebut sekaligus bergabung menjadi satu berupa tulisan
<B><I><U>tebal, miring
dan bergaris bawah</B></I></U>.
</BODY>
</HTML>
Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source
code itu kemudian lakukan Refresh pada dokumen web yang tampak pada
program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak
beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka
<HTML> hingga </HTML> jangan sampai ada yang salah tulis meskipun satu
karakter. Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak akan
menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah
menulis source code yang salah seperti itu, simpan (save) kemudian refresh
dokumen anda dan lihatlah hasilnya!
BAB II
Pengolahan Text
MEMFORMAT DOKUMEN
Untuk memformat dokumen digunakan tag-tag berikut ini :
 Tag <BR>
Tag ini tidak memerlukan tag penutup, yang berfungsi untuk berpindah baris.
 Tag <CENTER>
Tag ini digunakan untuk menentukan perataan tengah teks terhadap dokumen.
Contoh :
<CENTER>Belajar HTML</CENTER>
 Tag <P>
Tag ini berfungsi untuk memformat paragraph/alinea. Adapun kelengkapan atribut-
atribut dari tag ini adalah:
- ALIGN, yang berfungsi untuk menentukan perataan teks paragraph secara rata
kiri (LEFT), rata kanan (RIGHT) atau rata tengah (CENTER).
Contoh pemakaian:
<P ALIGN=RIGHT>Ini adalah teks yang ditulis dalam paragraph dengan perataan
teks rata kanan</P>
<HTML>
<HEAD><TITLE>Memformat Dokumen</TITLE></HEAD>
<BODY>
<P ALIGN="CENTER"><B>Memformat Paragraf</B></P>
<P>Dalam HTML paragraf dapat diformat dengan menggunakan

<P>, dimana teks yang dituliskan
diletakkan antara <P> dan </P>.</P>
<P>Paragraf juga dapat diatur perataannya yaitu rata kiri,

tengah dan kanan. Untuk menentukan perataan
paragraf digunakan atribut ALIGN. Sehingga penulisan tag-nya
dapat dituliskan <P ALIGN="RIGHT">
Teks Paragraf </P>.
</BODY>
</HTML>

Jika ditampilkan akan tampak seperti berikut ini:
 Tag <HR>
Tag ini berfungsi untuk mendefinisikan garis horisontal dokumen.
Sedangkan atribut-atribut yang didukung meliputi:
- SIZE, untuk menentukan ketebalan garis (dalam ukuran piksel)
Contoh pemakaian :
<HR SIZE=2>
- COLOR, digunakan untuk menentukan warna garis. Warna garis dapat diisi
dengan RED, GREEN, BLUE, YELLOW dll, atau dengan memanfaatkan warna
dalam bentuk Hexadesimal seperti : #00FF00 untuk wana hijau, #FF0000 untuk
warna merah dsb.
- WIDTH, digunakan untuk menentukan lebar garis (dalam satuan piksel atau
persenatase). Contoh :
<HR WIDTH=450> atau

<HR WIDTH=80%>
- NOSHADE, untuk menghilangkan efek tiga dimensi garis.

Contoh pemakaian :
<HR NOSHADE>

<HTML>
<BODY>
<P ALIGN="CENTER"><B>Menampilkan Garis Horisontal</B></P>
<HR>
<HR COLOR=RED WIDTH=80%>
<HR COLOR=BLUE SIZE=5 WIDTH=50%>
<HR SIZE=50 COLOR=PINK WIDTH=400 ALIGN=RIGHT>
<HR NOSHADE>
</BODY>
</HTML>
Jika dijalankan akan tampak tampilan sebagai berikut :
 Tag <Hn>, dimana n=1,2,3,4,5,6

Berfungsi untuk mendefinisikan header (kepala/judul) dokumen.
Atribut-atribut yang dimiliki yaitu:
- ALIGN, yang digunakan untuk menentukan perataan teks header terhadap
dokumen. Nilainya yaitu: LEFT, CENTER dan RIGHT.
<HTML>
<BODY>
<P ALIGN="CENTER"><B>Menampilkan HEADING TEXT</B></P>
<HR>
<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>

Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:
 Tag <PRE>
Berfungsi untuk memformat teks-teks dokumen agar tampilan/layout identik dengan
layout yang disusun pada editornya. Sehingga karakater spasi (Space) dan Carriage
Return (CR) akan ditampilkan apa adanya.
<HTML>
<BODY>
<H2 ALIGN="CENTER">Menggunakkan <PRE></H2>
<HR>
<PRE>
Daftar Nilai Pemrograman Internet I
Semester Genap Th Akademik 2006/2007
+------------+----------------------------------+---------+
| No Mhs | Nama Mahasiswa | Nilai |
+------------+----------------------------------+---------+
| 05.1.00001 | Budiman Waluyo | 3.1 |
| 05.1.00002 | Agus Suharja | 2.9 |
| 05.1.00003 | Muhamand Yamin | 3.2 |
| 05.1.00004 | Daniel Sukarman | 3.0 |
+------------+----------------------------------+---------+
</PRE>
</BODY>
</HTML>

Tampilan dari kode di atas adalah sebagai berikut :
MEMFORMAT KARAKTER
Untuk memformat karakter dapat digunakan koleksi tag-tag berikut ini :
 Tag <B>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak tebal.
 Tag <I>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak miring
 Tag <U>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis bawah.
 Tag <STRIKE>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis tengah.
 Tag <TT>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak seperti huruf mesin
ketik.
 Tag <SMALL>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih kecil dibanding
biasanya.
 Tag <BIG>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih besar disbanding
biasanya.
 Tag <SUB>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks subskrip

 Tag <SUP>
Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks
superskrip
Contoh :
<html>
<head>
<title>Memformat Karakter</title>
</head>
<body>
<H2>Memformat Karakter</H2><HR>
Teks cetak <B>Tebal</B><BR>
Teks cetak <I>Miring</I><BR>
Teks cetak <U>Garis Bawah</U><BR>
Teks cetak <STRIKE>Tebal</STRIKE><BR>
Teks cetak <TT>Huruf Mesin Ketik</TT><BR>
Teks cetak <SMALL>Lebih Kecil</SMALL><BR>
Teks cetak <BIG>Lebih Besar</BIG><BR>
Teks cetak H<SUB>2</SUB>SO<SUB>4</SUB><BR>
Teks cetak X<SUP>3</SUP>+Y<SUP>2</SUP>=0
</body>
</html>
Memformat FONT
Untuk memformat font digunakan tag <FONT>, adapun yang dipengaruhi oleh tag ini
meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat dipakai untuk mengatur
ketiga hal tersebut yaitu :
 SIZE, digunakan untuk menentukan ukuran font.

 COLOR, digunakan untuk menentukan warna font.

 FACE, digunakan untuk menentukan jenis atau bentuk font. Misal jenis font dapat
dipakai yaitu : Arial, Verdana, Times New Romans, Courier dll.
Contoh Penggunaan :
<HTML>
<HEAD><TITLE>Memformat FONT</TITLE></HEAD>
<BODY>
<H2 ALIGN="CENTER">Memformat FONT</H2>
<HR>
<FONT FACE="Arial Black" SIZE="5" COLOR="BLUE">Jenis FONT Arial
Black dengan warna Biru dan Ukuran Font
5</FONT><BR>
<FONT SIZE=4 FACE="Monotype Corsiva">Teks dengan FONT Monotype
Corsiva dengan Ukuran Font 7</FONT>
<BR>
<FONT FACE="Verdana" COLOR="RED">Teks dengan FONT VERDANA dengan
Ukuran Font default</FONT>
</BODY>
</HTML>
Tampilan dari kode-kode di atas adalah :
NOTASI KHUSUS
Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan
tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih
dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab.
Pembuatan spasi dalam kode-kode HTML diganti tulisan seperti yang
bisa kita lihat pada contoh berikut ini:
<HTML>
<BODY>

kata-kata ini diantarai satu spasi sedangkan<br>kata-kata

    ini     diantarai

lima     spasi
</HTML></BODY>
Disamping notasi untuk pembuatan spasi ( ) ada lagi sejumlah notasi
khusus untuk penulisan karakter-karakter tertentu. Karakter-karakter ini harus
dituliskan dengan notasi khusus mengingat karakter-karakter ini dipakai juga
sebagai kode-kode tag atau karena memang tidak dijumpai dalam karakter teks
ASCII. Berikut beberapa diantaranya:
Karakter Keterangan Notasi

< kurung runcing buka <
> kurung runcing tutup >
& dan &
" tanda petik ganda "
+ tanda plus minus &plusm
Â© hak cipta atau copyright ©
Â® terdaftar atau registered n;
®
INDENTASI
Indentasi paragraph adalah cara mengatur posisi baris-baris paragraf dari margin
(tepi halaman). Ada tiga macam bentuk :
 tag <DD>
baris pertamanya saja yang agak masuk ke dalam.
Contoh:
<HTML>
<BODY>
<DD>Paragraf atau alinea ialah sekumpulan kalimat <br> yang

mengandung satu pokok pikiran. Antara satu <br> paragraf

dengan paragraf lainnya biasanya dipisahkan<br> oleh baris
kosong. Namun biasa pula paragraf itu <br> ditandai dengan
posisi baris pertamanya yang agak <br> masuk ke dalam.
</BODY>
</HTML>
Beginilah hasilnya bila dibuka dalam browser:
 tag <BLOCKQUOTE>
membuat paragraf yang semua barisnya agak masuk ke dalam. Untuk
membuat paragraf semacam ini kita menggunakan yang mengapit paragraf-
paragraf yang hendak kita jadikan masuk ke dalam.
<HTML>
<BODY>
Ini adalah paragraf normal
<BLOCKQUOTE>
<P>Ini paragraf yang agak masuk ke dalam.
<P align="justify">Ini juga contoh paragraf yang agak masuk
ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa
<b>semua baris</b> dalam paragraf ini letaknya agak masuk ke
dalam. <i>Sama rata sama jauhnya</i>.
</BLOCKQUOTE>
<P>Nah, paragraf ini kembali normal, karena tag
<i>blockquote</i> sudah berlalu alias sudah ditutup di atas.
</BODY>
</HTML>

Beginilah tampilannya dalam browser:
 daftar definisi (definition list)

Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf
normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang
agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat
di atasnya. Untuk lebih jelasnya, berikut ini contoh daftar definisi:
Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu
<DL> yang menandai dimulai atau diakhirinya daftar definisi, <DT> yang
menandai paragraf normal (yang dijelaskan) dan <DD> yang menandai paragraf
yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya).
Ini contoh source kode di atas :
<HTML>
<BODY>
<p align="center"><b>Daftar Istilah Penting:</b>
<DL>
<DT><B>Internet</b>
<DD>Singkatan dari <i>interconnection network</i> atau hubungan
antar jaringan. Internet ialah jaringan komputer global dan
merupakan jaringan komputer yang terbesar di dunia karena mampu
menghubungkan seluruh komputer yang ada di dunia.
<DT><b>HTTP</B>
<DD>Singkatan dari <i>Hypertext Transfer Protocol</i> adalah
salah satu protokol bahasa yang digunakan untuk berkomunikasi
antar server komputer dalam internet. Protokol bahasa yang lain
dalam internet misalnya: Telnet, News, Gropher, FTP.
</DL>
Karena cuma demo, cukup dua definisi sajalah. Nah, paragraf
ini kembali normal.
</BODY>
</HTML>

BAB III
List Element
Informasi dapat disampaikan dengan mudah jika ditampilkan dengan

menggunakan daftar. HTML menyediakan beberapa jenis daftar, yaitu :
 Ordered List/Numbered List
 Unordered List/Bulleted List
 Menu List

Directory list
 Definition List
A. Ordered List
Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor
secara urut. Ordered List dimulai dengan tag awal <OL> dan diakhiri dengan tag
</OL>, dan diantara kedua
tag tersebut terdapat tag <LI> yang menyatakan list item.
Contoh :
<html>
<head>
<title>Ordered List</title>
</head>
<body bgcolor="lightgrey">
<OL>
<LH><EM>Dibawah ini aalah warna Pelangi : </EM><BR><BR>
<LI>Merah
<LI>Jingga
<LI>Kuning
<LI>Hijau
<LI>Biru
<LI>Nila
<LI>Ungu
</OL>
</body>
</html>
Hasil pada tampilan browser :

Mengganti jenis nomor pada tag <OL> beserta fungsi-fungsinya :

Atribut Fungsi
COMPACT Untuk menyatakan bahwa item dalam daftar pendek, sehingga
browser menampilkan dalam bentuk yang lebih padat
TYPE = A Membuat daftar berurut dengan huruf besar ( A,B,C,..)
TYPE = a Membuat daftar berurut dengan huruf kecil (a,b,c,…)
TYPE = I Membuat daftar berurut dengan huruf romawi besar (I,II,III,…)
TYPE = i Membuat daftar berurut dengan huruf romawi kecil (i,ii,iii,…)
TYPE = 1 Default nilai daftar berurut (1,2,3,…)
START = n Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal
Contoh :
<html>
<head>
<title>Nested Ordered List</title>
</head>
<OL>
<LH><EM>Planet dalam sistem tata surya : </EM><BR><BR>
<LI>Merkurius
<OL TYPE = A>
<LI>57,9 juta kilometer dari matahari
<LI>Tidak punya satelit
</OL>
<LI>Venus
<OL TYPE = a>
<LI>108 juta kilometer dari matahari
</OL>
<LI>Bumi
<OL TYPE = I>
<LI>Satu satelit = Bulan
</OL>
<LI>Mars
<OL TYPE = i>
<LI>227,9 kilometer dari matahri
<LI>Dua satelit =
<OL START = 1>
<LI>Pho
bos
<LI>Dei
mos
</OL>
</OL>
</OL>
</body>
</html>
Hasil pada tampilan browser :

B. Unordered List
Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam
sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan
bulatan, kotak atau lingkaran.
Penggunaan Unordered List diawali dengan tag <UL> dan diakhiri dengan tag
</UL>, dan didalamnya ditandai dengan tag <LI>.
Contoh :
<html>
<head>
<title>Nested Unordered List</title>
</head>
<UL>
<LI>Merkurius
<UL>
</UL>
<LI>Venus
<UL>
<LI>108 juta kilometer dari matahari
</UL>
<LI>Bumi
<UL>
<LI>Satu satelit = Bulan
</UL>
<LI>Mars
<UL>
<LI>227,9 kilometer dari matahri
<LI>Dua satelit =
<UL START = 1>
<LI>Phobos
<LI>Deimos
</UL>
</UL>
</UL>
</body>
</html>
Hasil tampilan browser :

Tambahan atribut pada tag <UL> :
Atribut Fungsi
TYPE = circle Membuat tanda lingkaran O untuk item
TYPE = square Membuat tanda kotak □ untuk item
TYPE = disc Membuat tanda cakram ● untuk item
C. Menu List
Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor
ataupun penanda item. Menu List menggunakan tag awal <MENU> dan tag
akhir </MENU>, didalamnya menggunakan tag <LI>. Browser secara otomatis
akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya
digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk
membuat link ini digunakan tag <A> yang akan membuat link ke halaman lain.
Penggunaan tag <A> adalah <A HREF “page.html”> link ke halaman page.html </A>.
Contoh :
<html>
<head>
<title>Menu List</title>
</head>
<MENU>
<LI><A HREF="merkurius.html">Merkurius</A>
<LI><A HREF="venus.html">Venus</A>
<LI><A HREF="bumi.html">Bumi</A>
<LI><A HREF="mars.html">Mars</A>
<LI><A HREF="jupiter.html">Jupiter</A>
<LI><A HREF="saturnus.html">Saturnus</A>
<LI><A HREF="uranus.html">Uranus</A>
<LI><A HREF="neptunus.html">Neptunus</A>
<LI><A HREF="pluto.html">Pluto</A>
</MENU>
</body>
</html>
Hasil dari tampilan Browser :

D. Directory List
Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau
DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal <DIR>
dan tag akhir </DIR>. Penggunaan tag <LI> juga diperlukan.
Contoh :
<html>
<head>
<title>Directory List</title>
</head>
<DIR>
<LH><EM>Warna Pelangi : </EM><BR><BR>
<LI>Merah
<LI>Jingga
<LI>Kuning
<LI>Hijau
<LI>Biru
<LI>Nila
<LI>Ungu
</DIR>
</body>
</html>
Hasil dari tampilan browser :
E. Definition List
Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar
sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-
istilah yang disebut juga Glossary List (daftar istilah).
Definition List dinyatakan dengan tag awal <DL> dan tag akhir </DL>. Dalam tag
tersebut ada dua bagian, yaitu:
 Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <DT> atau
Definition Term
 Definisi dari istilah tersebut dinyatakan dengan tag tunggal <DD> atau Definition
Data

Contoh :
<html>
<head>
<title>Definition ist</title>
</head>
<H3>Planet dalam sistem tata surya : </H3>
<DL>
<DT>Merkurius
<DD>Planet yang paling kecil dan paling dekat dengan
matahari,
berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari
adalah
58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius kira-
kira
2,414 kilometer (1,500 mil).
<DT>Bumi
<DD>Planet ketiga dari matahari, berevolusi dengan matahari
selama
365,26 hari. Jarak dari matahari adalah 149 juta kilometer (92,96
juta
mil), berputar pada porosnya selama 23 jam 56,07 menit, mempunyai
radius
6,374 kilometer (3,959 mil) dan mempunyai berat kira-kira 29,11 x
10^24
kilogram (13,17 x 10^24 pounds).
</DL>
</body>
</html>
F. Kombinasi Tipe List

Kombinasi tipe list diperlukan jika suatu daftar berisi daftar dengan tipe
berbeda. Sebagai contoh, anda mempunyai ordered list yang didalamnya berisi daftar
unordered dan data definition. Contoh :
<html>
<head>
<title>Combined List</title>
</head>
<OL>
<LH><EM>Planet dari sistem Tatasurya :</EM><BR><BR>
<LI>Merkurius

<UL>
<UL>
<LI>Dewa perdagangan dan perjalanan
<LI>Definisi
<DL>
<DT>Mercury
<DD>Planet yang paling kecil dan paling dekat dengan
matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari
matahari adalah
58,3 juta kilometer 36,2 juta mil) dan mempunyai ukuran radius kira-
kira
2,414 kilometer (1,500 mil).
</DL>
</UL>
</UL>
<LI>Venus
<UL>
<UL>
<LI>Dewi cinta dan kecantikan
<LI>Definisi
<DL>
<DT>Venus
<DD>Planet kedua dari matahari, berevolusi dengan matahari
selama
224,7 hari. Jarak dari matahari adalah 100,1 juta kilometer (67,2
juta
mil), mempunyai radius 6,052 kilometer (3,760 mil) dan mempunyai
berat kira-kira 0,815 dari Bumi.
</DL>
</UL>
</UL>
</OL>
</body>
</html>
G. Membuat Bullet List yang Berbeda

Bullet yang berbeda dapat digunakan dalam tag <UL>. Pemakaian tag
<LI> dalam
Unordered List dapat ditinggalkan. Anda bisa memakai image sesuai dengan keinginan
anda. Tag
<IMG> harus digunakan untuk menampilkan gambar. Tag <IMG> sebagai pengganti
pemakaian tag <LI>. Formatnya <IMG SRC=”kembang.gif” ALIGN=TOP>Merah<BR>

Contoh :
<html>
<head>
<title>Manual List</title>
</head>
<IMG SRC="STMIKSinus.jpg" ALIGN=TOP><EM>Warna Pelangi :</EM><BR><BR>
<UL>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Merah<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Jingga<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Kuning<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Hijau<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Biru<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Nila<BR>
<IMG SRC=" STMIKSinus.jpg " ALIGN=BOTTOM>Ungu<BR>
</UL>
</body>
</html>

BAB IV
IMAGE DAN LINK
IMAGE
Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML
adalah :
 File gambar lambat untuk di download.
 Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file
gambar
 Tidak ada browser grafik/gambar
 Gambar tidak selalu dikenal secara international
 Warna gambar mungkin tidak ditampilkan seperti aslinya
A. Format gambar
Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai
format standar untuk menampilkan gambar dalam WEB.
B. WARNA
 GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256
warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni
dan gambar-gambar lain yang sederhana tetapi tidak cukup baik untuk
menyimpan gambar fotografik.
 JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna.
Dengan warna sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-
gambar dengan kualitas foto.
C. Pemadatan Ukuran Gambar

 GIF memadatkan datanya dengan menggunakan metode lossless
compression. Metode lossless compression bekerja dengan mencari pola-
pola berulang dalam suatu gambar. Lossless compression pada GIF
membuang informasi dalam jumlah yang sedikit, yaitu hanya warna-warni
dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan
tidak lama, karena file hasil pemadatan dengan file yang diuraikan
merupakan dua buah file yang hampir sama. Gambar file PNG juga
menggunakan lossless compression, sehingga bisa menjadi alternatif
pengganti file GIF.

 JPEG menggunakan metode pemadatan lossy compression. Pemadatan

gambar metode lossy compression, membuang sejumlah bit-bit gambar
untuk membuat gambar berukuran kecil. Tingkat pembuangan informasi
gambar ini biasanya dapat ditentukan oleh pemakai sewaktu membuat file
JPEG.
D. Menampilkan inline dan external image

Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan
eksternal.
 Internal Image : gambar ditampilkan secara langsung saat web page dimuat
dalam browser yang berbasiskan grafik.
 External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu
page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sangat mudah, dengan menggunakan

tag <IMG> beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk
menampilkan gambar. Penggunaan
<IMG> secara umum adalah : < IMG SRC=”nama file”>
Contoh :
<html>
<head>
<title> Penggunaan Tag IMG</title>
</head>
<body bgcolor=lightgrey>
<h3 align=center>Penggunaan tag IMG</h3>
<p>
<img src="E:\Image\STMIKsinus.jpg">
Teks ditampilkan setelah gambar.
</p>
<p>
Teks ini terpotong dengan
<img src=" E:\Image\STMIKsinus.jpg ">
gambar logo.
</p>
<p>
Gambar tampil inline setelah teks ini
<img src=" E:\Image\STMIKsinus.jpg ">
</p>
</body>
</html>

Hasil tampilan dari web browser :
E. Mengatur Perataan teks dengan Inline Image

Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah
dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag
<IMG>.
 TOP : Meratakan teks dengan bagian atas gambar
 MIDDLE : Meratakan gambar dengan bagian tengah gambar
 BOTTOM : Meratakan teks dengan bagian bawah gambar
Contoh :
<html>
<head>
<title> Penggunaan Align PadaTag IMG</title>
</head>
<h3 align=center>Perataan Teks dalam tag IMG</h3>
<p>
<img src="E:\Image\STMIKsinus.jpg" align=top>
Teks ini rata dengan bagian atas gambar.
</p>
<p>
<img src="E:\Image\STMIKsinus.jpg" align=middle>
Teks ini rata dengan bagian tengah gambar
</p>
<p>
<img src="E:\Image\STMIKsinus.jpg" align=bottom>
Teks ini rata dengan bagian bawah gambar.
</p>
</body>
</html>

Hasil tampilandari browser :
F. Mengatur Posisi Gambar Pada halaman WEB

Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB.
Penggunaan atribut ALIGN beserta nilainya dalam tag <IMG> untuk mengatur
tampilan teks disekitar gambar.
 LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar
 RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di
sekitar gambar.
Contoh :
<html>
<head>
<title> Tag IMG dan atribut ALIGN</title>
</head>
<h2 align=center>Penggunaan Perataan Teks </h2>
<p>
<img src="E:\Image\STMIKsinus.jpg" align=left>
<font size=5>Gambar rata kiri</font size>

Dalam buku ini akan dipelajari cara membuat halaman WEB. World
Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa
server komputer yangterhubung satu sama lain dalam jaringan
Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel,

membuat frame juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site

sendiri.....
</p>
<p>
<img src="E:\Image\STMIKsinus.jpg" align=right>
<font size=5>Gambar rata kanan</font size>
Dalam buku ini akan dipelajari cara membuat halaman WEB. World
server komputer yang terhubung satu sama lain dalam jaringan
Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel,

membuat frame juga tidak ketinggalan cara membuat form.

sendiri.....
</p>
</body>
</html>
G. Mengatur Ukuran Gambar Pada Browser

Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :
 Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar

secara inline.
 Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.
Pengaturan ukuran tinggi dan lebar pada tag <IMG> dilakukan oleh atribut
HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.
Contoh :
<html>
<head>
<title> Menggunakan HEIGHT dan WIDTH</title>
</head>
<h3>Mengatur Ukuran Tinggi dan Lebar Gambar </h3>
<font size=4>Gambar Ukuran Asli</font size><br>
<IMG SRC="E:\Image\STMIKsinus.jpg"><br>
<font size=4>Gambar Ukuran lebar=180px Tinggi 140px</font
size><br>
<IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=180 HEIGHT=140>
</body>
</html>
H. Menambahkan Teks Keterangan

Anda dapat menambahkan keterangan tambahan pada gambar yang
ditampilkan secara inline. jika petunjuk mouse diletakan di atas gambar, maka

teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag <IMG>.
Pemakaian secara umum :
<IMG SRC=”nama file gambar” ALT=”keterangan”>
Contoh :
<html>
<head>
<title> Menggunakan atribut ALT </title>
</head>
<h3>Penggunaan atribut ALT </h3>
<IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=280 HEIGHT=240
ALT="Cover
Buku Panduan HTML 4.01">
</body>
</html>
I. Memberi Border Pada Gambar

Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER
memberikan suatu border atau batas pada suatu inline gambar. Inline gambar tidak
mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan
satuan pixel.
Contoh :
<html>
<head>
<title> Penggunaan Atribut BORDER</title>

</head>
<h3>Penggunaan BORDER untuk gambar </h3>
<A HREF=""> <IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=100 HEIGHT=100
BORDER=0></A><br><br>
<A HREF=""><IMG SRC="dE:\Image\STMIKsinus.jpg" WIDTH=100 HEIGHT=100
BORDER=5></A><br><br>
<A HREF=""><IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=100 HEIGHT=100
BORDER=10></A><br>
</body>
</html>
Hasil tampina dari web browser :
J. Memberi Ruang Pada Gambar

Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi
antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi
horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE
menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan
dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar. Contoh :
<html>
<head>
<title>Atribut VSPACE dan HSPACE</title>
</head>
<h3>Menggunakan atribut VSPACE dan HSPACE</h3>
<IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=100 HEIGHT=100 VSPACE=20
HSPACE=20 ALIGN=LEFT>
<FONT SIZE=4>Teks Wrap disekitar Gambar </FONT SIZE><br>
Dalam buku ini akan dipelajari cara membuat halaman web. World
server komputer yang terhubung satu sama lain dalam jaringan
Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat

tabel, membuat frame juga tidak ketinggalan cara membuat form.

sendiri....
</body>
</html>
Hasil tampulan dari web browser :
K. Link Dengan Gambar

Suatu gambar dapat berfungsi secara bersama-sama dengan tag <A>. jika
gambar di klik maka link akan menuju ke informasi yang diberikan pada tag <A>.
Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk
membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar
sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu
dokumen.
Contoh :
<html>
<head>
<title>Gambar sebagai link</title>
</head>
<h3>Gambar sebagai link</h3>
<UL>

<LI> <IMG SRC="E:\Image\STMIKsinus.jpg" WIDTH=100 HEIGHT=100

VSPACE=20
HSPACE=20 ALIGN=middle>Ini gambar biasa<br>
<LI> <A HREF="E:\Image\STMIKsinus.jpg">
ALIGN=middle> </A> Gambar berfungsi sebagai link<BR><BR>
<LI><A HREF="E:\Image\STMIKsinus.jpg">
ALIGN=middle> Link ke beruang</A><BR>
</UL>
</body>
</html>
LINK
Link dapat menuju ke Web Page, grafik, suara, film, program, isi dari server
Gopher, log-in ke suatu remote computer, server e-mail atau ke suatu ftp.
A. Hypertext dan Hypermedia

Dokumen Hypertext adalah dokumen yang berisi link ke dokumen lain.
Dokumen Hypermedia adalah dokumen yang berdasarkan hypertext ditambah
dengan multimedia seperti gambar, video dan audio.

B. Uniform Resource Locator

WWW menggunakan URL untuk menuju ke lokasi dari suatu informasi
pada server lain. Pemakaian umum URL adalah
Protokol://domain_host{:port}/path/nama_file.
Dimana protokol bisa salah satu dari :

 http = untuk suatu file pada server WWW
 file = untuk suatu file pada sistem komputer lokal
 ftp = untuk suatu file pada server ftp, dll
Host adalah suatu alamat server. Contoh : www.yahoo.com , www.microsoft.com

Port memberitahu browser untuk membuka koneksi pada suatu port jaringan yang
berbeda dari port default untuk setiap protokol.
Path adalah suatu lokasi dari informasi yang dicari di dalam server, sedang nama
file adalah nama dari file yang diinginkan. Contoh : www.rekreasi.com/lokasi.html
C. Absolute Path dan Relative Path

Dalam HTML terdapat dua jenis path, yaitu path absolute dan path relative.
Path relative jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif,
yaitu terletak di atas atau di bawah direktori dokumen tersebut. Jika suatu file
berada di bawah direktori yang sedang aktif, maka direktori file tersebut perlu
disebutkan. Misalnya file “hal12.html” berada di bawah direktori Bab1 maka untuk
membuat link ke file “hal12.html” adalah :
<A HREF=”Bab1/hal12.html> Link ke halaman 12</A>
Jika ingin membuat suatu link ke direktori di atas direktori aktif saat ini, gunakan :
<A HREF=”/link.html> Link ke file di atas direktori saat ini

</A>
Tanda .. dalam path menunjukan direktori di atas direktori aktif saat ini.
D. Link Ke Bagian Lain dalam Satu Dokumen

Secara default link digunakan untuk mendapatkan informasi dokumen Web.
Pada contoh program dibawah ini, dokumen HTML mempunyai dua link, satu
merupakn anchor tujuan yaitu “Bab2.html” dan yang satunya anchor gambar GIF,

yaitu “Sunset.gif”.
<html>
<head>
<title>LINK dan ANCHOR</title>
</head>
<h3>Penggunaan Link dan anchor</h3>
Berikut adalah penggunaan Link dan Anchor untuk memanggil
dokumen web lain
<P>Lihat tanda Link<A HREF="Bab2.html">Bab 2</A>
Untuk melihat yang detail <A HREF="../images/hutan.gif"> Gambar
Hutan</A>
</body>
</html>
E. Atribut Name dan ID

Atribut href untuk menyatakan suatu file tujuan. Server mencari kedalam
direktori di mana dokumen saat ini berada untuk mencari file tersebut. File
dokumen tujuan HTML yang menggunakan elemen A bisa diikuti atribut name
atau id. Untuk membuat link yang membaca pembaca ke suatu bagian tertentu
dalam dokumen, cukup sertakan tanda # setelah nama bagian.
Contoh program dibawah ini untuk membuat tabel yang berisi link pada
elemen header H2, H3 dan lainnya dalam satu dokumen, dengan menggunakan
elemen A dan atribut name dan ID :
<html>
<head>
<title>Element A ( atribut name dan id )</title>
</head>
<h1>Daftar Isi</h1>
<P><h2><A HREF="#section1">Pengenalan</A><br>

<A HREF="#section2"> Latar Belakang</A> <br>

<A HREF="#section2.1"> Catatan</A> </h2><br>
Jika anda klik salah satu link dokumen di atas, maka isi
dokumen yang berada di bawah (tidak tertampung oleh
jendela browser) akan ditampilkan. Hal ini akan sangat
membantu pembuatan dokumen yang sangat panjang.
Misalnya FAQ (Frequently Ask Question), anda bisa
klik pertanyaan yang ada, kemudian dokumen akan link
ke dokumen pertanyaan, yang sebenarnya berada pada satu
dokumen. <br>
Dan untuk kembali ke daftar pertanyaan, klik toolbar Back
yang berada pada menu Standard, atau jika sudah dibuat
link ke daftar pertanyaan tinggal klik kembali saja.
<h2><A name="section1">Pengenalan</A></h2>
...section 1...
<h2><A name="section2">Latar Belakang</A></h2>
...section 2...
<h2><A name="section2.1">Catatan</A></h2>
...section 2.1...
</body>
</html>
 Jika anda klik salah satu daftar isi di atas misalnya Pengenalan atau Latar
belakang atau Catatan, maka dokumen akan link pada isi dari daftar
tersebut yang sebenarnya berada di bagian bawah dokumen. Hal ini
dikarenakan jendela browser tidak mampu menampung seluruh isi
dokumen.
F. Judul LINK
Atribut title bisa digunakan dalam elemen A dan LINK untuk menambah
informasi tentang link. Informasi ini akan ditampilkan berupa tooltip oleh browser.
Contoh :

<html>
<head>
<title>Atribut title</title>
</head>
<h3>Menampilkan title sebagai tool tip</h3>
<body>
............<br>
............<br>
<P>Anda akan melihat lebih jauh ke dalam<A HREF="Bab2.html"
title="Bab 2">Bab 2</A>
<A HREF="./Bab2.html1" title="Isi Bab 2.">Bab 2</A>
Lihat juga gambar <A HREF=" E:\Image\STMIKsinus.jpg"
title="JPG Image logo STMIK SINUS" WIDTH=180 HEIGTH=180>Gambar
Logo STMIK SINUS</A>
</body>
</html>
G. Elemen <A>
Untuk membuat suatu link dalam HTML elemen dipergunakan elemen anchor
yang dinyatakan dengan tag berpasangan <A>…</A>. Atribut yang boleh menyertai
elemen A adalah :
Name : Menyatakan titik anchor dalam suatu dokumen HTML.
Href : Menunjukan lokasi dokumen Web.
Hreflang : Menunjukan bahasa yang dipergunaka, hanya digunakan
bersama dengan href. Type : Atribut ini memberi catatan
tipe isi dari dokumen tujuan.

Rel : Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan

yang ditunjuk dengan atribut href.
Rev : Menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh
atribut href dengan dokumen asal.
Charset : Untuk menspesifikasikan karakter encoding dokumen web.
H. Sintaks nama Anchor

Anchor mempunyai nila atribut name dan id. Nama anchor harus mengikuti
beberapa aturan sebagai berikut :
 Unik, nama anchor harus unik dalam dokumen. Dalam satu dokumen tidak
boleh ada nama anchor yang sama.
 String # , penggunaan string # untuk menuju ke bagian lain dalam dokumen.
I. Dokumen Yang Tidak Ditemukan Browser

Jika suatu dokumen yang link tidak ditemukan oleh browser, ada beberapa
keterangan :
 Jika browser tidak menemukan lokasi yang di link, browser akan memberi
keterangan.
 Jika browser tidak bisa mendefinisikan tipe dokumen yang di link,
browser akan terus mencobanya dan akan memberi peringatan.
J. Elemen <LINK>
Elemen ini untuk mendefinisikan suatu hubungan (link). LINK boleh ditampilkan
dalam elemen <HEAD> dan ditampilkan berulang kali. LINK mempunyai tugas
untuk menyampaikan informasi hubungan antar dokumen /bagian, misalnya toolbar
dengan menu drop-down.
Berikut adalah contoh potongan program yang menggambarkan beberapa LINK
yang berada pada elemen <HEAD>. Dokumen yang aktif adalah “Bab2.html”.
Atribut rel menunjukan hubungan antara dokumen yang aktif dengan dokumen
yang ituju. Nilai “Index”, “Next”, “Prev” menjelaskan tujuan dokumen berikutnya.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

http://www.w3.org/TR/html4/strict.dtd>
<HTML>
<HEAD>
<TITLE>Bab 2</TITLE>
<LINK rel=”Index” href=”../index.html>

<LINK rel=”Next” href=”Bab3.html>

<LINK rel=”Prev” href=”Bab1.html>
</HEAD>
…isi dokumen selanjutnya…
K. Link Tujuan Dan Kembali

Atribut rel dan rev digunakan untuk saling melengkapi. Atribut rel
digunakan untuk link ke dokumen tujuan sedangkan atribut rev digunakan untuk
link kembali ke dokumen sebelumnya.
Contoh
:
 Dokumen A : <LINK href=”docB” rel=”foo”>
Mempunyai arti yang sama dengan
 Dokumen B: <LINK href=”docA” rev=”foo”>
Kedua atribut boleh digunakan secara bersamaan. Atribut rev menunjukan link
kembali dari atribut rel. ini menunjukan bahwa halaman sebelumnya adalah
halaman superior. Atribut rel dan rev mempunyai beberapa nilai yang
mengindikasikan dokumen sebagai :
Parent : Dokumen utama
(parent) Index : Dokumen
indeks
Next : Halaman
selanjutnya
Contents : Isi dokumen
Alternate : Versi alternatif
Begin : Awal halaman
Nilai alternate menunjukan dokumen referensi dari alternatif versi halaman yang
aktif. Alternatif versi ini bisa untuk versi cetak atau alternatif bahasa (tambahan
atribut lang).
<LINK REL=alternate HREF=FrenchDoc.html LANG=fr
TITLE=”Paris”>
L. Link Dan External Style Sheet

Jika elemen LINK dihubungkan dengan external style sheet sebuah

dokumen, atribut type menunjukan style sheet bahasa dan atribut media
menunjukan tampilan media. Sebagai contoh nilai
MEDIA=screen menentukan style sheet akan dihubungkan dengan
layar video, MEDIA=print menunjukan versi cetak.
M. Link Dan Search Engine

Elemen LINK digunakan untuk menyediakan keanekaragaman informasi dari
serch engine, termasuk :
 Link untuk alternatif versi bahasa dokumen, ditulis dengan bahasa
selain bahasa inggris.
 Link untuk alternatif versi dokumen, mendesain media yang
berbeda seperti versi yang cocok untuk pencetakan
 Link untuk awal halaman dari sekelompok dokumen
Contoh program dibawah ini untuk menggambarkan informasi bahasa, tipe

media, tipe link yang dikombinasikan untuk memperbaiki penanganan dokumen
oleh search engine. Penggunaan atribut hreflang untuk menemukan versi bahasa
yang digunakan dalam dokumen, misalnya bahasa belanda, Portugis dan Arab.
Atribut charset digunakan sebagai encoding dalam bahasa Arab. Atribut lang untuk
menunjukan nilai atribut title untuk elemen LINk yang didesain dalam bahasa
Perancis.
<head>
<title>Manual dalam Bahasa English</title>
</head>
<LINk title="Link : Manual dalam Bahasa Belanda Dutch"
type="text/html" rel="alternate" hreflang="nl"
href="http://someplace.com/manual/dutch.html">
<LINk title="Link : Manual dalam Bahasa Portugis"
type="text/html"
rel="alternate" hreflang="pt"
href="http://someplace.com/manual/portuguese.html">
<LINk title="Link : Manual dalam Bahasa Arab"
type="text/html" rel="alternate" charset="ISO-8859-6"
hreflang="ar"
href="http://someplace.com/manual/arabic.html"
<LINk lang="fr" title="La documentation en Français"
type="text/html" rel="alternate" hreflang="fr"
href="http://someplace.com/manual/french.html"
</HEAD>
Contoh berikutnya,menyuruh search engine untuk menemukan versi cetak secara

manual.
<head>
<title>Referensi Manual</title>
<LINk media="print" title="Cetak manual dengan
postcript" type="application/postcript"
rel="alternate"
href="http://someplace.com/manual/post
cript.ps">
</HEAD>
Contoh program berikutnya, menuruh search engine untuk menemukan

halaman depan dari sekelompok dokumen :
<head>
<title>Referensi Manual-halaman 5</title>
<LINk rel="Start" title="Halaman pertama dari buku manual"
type="text/html"
href="http://someplace.com/manual/st
art.html">
</HEAD>
N. Informasi Path Dengan Elemen Base

Dalam HTML, link dan referensi untuk external gambar, applet, proses from,
style sheet dan lainnya selalu dispesifikasikan dengan URL. Elemen BASE
mengijinkan programmer untuk menspesifikasikan dokumen dasar URL secara
nyata. Elemen BASE boleh digunakan tanpa tag penutup. Jadi boleh hanya tag
<BASE>. Atribut yang boleh menyertai adalah href, untuk menunjukan absolute URL
dapat diubah menjadi relative URL. Elemen BASE muncul dibagian HEAD.
Informasi path ditunjukan oleh elemen BASE hanya untuk URL di elemen tersebut
muncul.
Contoh potongan program :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>
<html>
<head>
<title>Produk Kami</title>
<base href=http://www.maju_jaya.com/products/intro.html>
</head>
<body>
<p>Sudahkah anda melihat<A href=”../sangkar/burung.gif”>Sangkar
Burung</A>?
</body>
</html>
Relative URL : “..’sangkar/burung.gif’ akan menghasilkan :
http://www.maju_jaya.com/sangkar/burung.gif
O. Membuat Link Ke E-mail

Link ke email menggunakan mailto: untuk
menspesifikasikan alamat. Contoh potongan program :

<A HREF=mailto:endang2001@hotmail.com>Kirimi saya e-mail</A>

 URL mailto : menyebabkan browser menampilkan suatu kotak pesan dimana
pembaca dapat mengetikkan pesan-pesannya
P. Link Ke FTP
Dengan Web, anda dapat melihat dan mengambil file dari suatu server FTP, tetapi
anda tidak dapat menaruh file ke server tersebut. Untuk membuat link ke situs
FTP gunakan ftp://namasitus/path. Lihat potongan program berikut ini :
<A href=ftp://ftp.novell.com> Server FTP di Novell Inc </A>
<A href=ftp://ftp.intel.com/pub> Direktori pub di FTP intel </A>
<A href=ftp://ftp.novell.com/pub/patches.zip> File patches.zip
</A>

BAB V
TABLE
I. ELEMEN <TABLE>
Untuk membuat tabel dimulai dengan pasangan tag <TABLE>…</TABLE>. Di
dalam tag ini dapat menentukan banyak kolom dan baris, perataan, warna dan
pengaturan lainnya. Tabel
terdiri dari beberapa bagian, yaitu :
 Tag tabel : untuk menandai awal dan akhir tabel yang dinyatakan dengan
pasangan tag
<TABLE>,,,</TABLE>.
 Tabel Row atau baris tabel : baris-baris pada suatu tabel yang
dinyatakan dengan pasangan tag <TR>…</TR>
 Tabel Data atau data tabel : tempat di mana anda memasukan informasi
dalam suatu tabel. Beberapa tabel data yang terdapat dalam suatu baris
membentuk table row. Table data dinyatakan dengan pasangan tag
<TD>…</TD>
 Table header : judul tabel yang biasanya terletak di bagian paling atas atau
paling kiri tabel.
Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang
tabel header yang terletak dibagian kiri adalah judul baris tabel. Tabel
header dinyatakan dengan pasangan tag <TH>…</TH>
Selain elemen-elemen di atas, tabel juga mempunyai atribut-atribut antara lain :
 BORDER : untuk membuat batas tepi dari suatu tabel
 WIDTH: untuk mengatur lebar tabel
 ALIGN : untuk mengatur bentuk perataan horisontal data di dalam tabel,
seperti di kiri, di tengah atau di kanan
 VALIGN : untuk mengatur perataan vertikal dari data, seperti di atas,
ditengah atau dibawah
 CELLSPACING dan CELLPADDING : untuk mengatur spasi antar sel dan spasi
dalam sel.
Sel adalah tempat/kotak dimana data atau judul kolom atau judul baris berada
 ROWSPAN atau COLSPAN : gabungan sel-sel dalam suatu kolom atau baris
 COLOR :untuk mengatur warna suatu sel dalam tabel
 SUMMARY : untuk memberi keterangan singkat mengenai struktur dan
kegunaan tabel

 RULES : untuk mengatur ukuran antara sel dalam tabel

 FRAME : untuk mengatur frame di sekitar tabel
II. ELEMEN <CAPTION>
Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya
dibagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk
membentuk suatu caption adalah
<CAPTION>…</CAPTION>
Pendefinisian caption ini adalah :
<CAPTION
ALIGN=TOP|BOTTOM|LEFT|RIGHT>
……………JUDUL
TABEL………….
</CAPTI
ON>
Contoh :
<ht
ml>
<head><title>TABLE</title><he
ad>
<body
bgcolor=lightgrey>
<table
border>
<caption align=left>WARNA
PELANGI</caption>
<caption align=right>WARNA
PELANGI</caption>
<caption align=top>WARNA
PELANGI</caption>
<caption align=bottom>WARNA
PELANGI</caption>
<th>WARNA</th><th>WARNI</th><th>PELANGI</
th>
<tr><td>MERAH</td><td>ORANGE</td><td>KUNING</td></
tr>
<tr><td>HIJAU</td><td>BIRU</td><td>UNGU</td></
tr>
</table> </body>
</html>

III. GROUP BARIS

Baris tabel bisa dibagi menjadi tabel head, tabel foot dan beberapa tabel
body dengan menggunakan elemen THEAD, TFOOD dan TBODY. Tabel head dan
tabel foot berisi informasi
tentang tabel kolom sedangkan tabel body baris dari tabel data. Setiap THEAD,
TFOOT, dan
TBODY berisi group baris dan masing-masing group paling sedikit berisi satu
baris yang didefinisikan dengan elemen <TR>.
TFOOT harus berada sebelum TBODY agar browser memberikan tempat
pijakan sebelum menerima baris data. Berikut adalah ringkasan tag yang diperlukan
dan yang boleh diabaikan :
 Tag <TBODY> harus disertakan kecuali tabel hanya berisi satu tabel body
dan tidak mempunyai tabel head atau tabel foot. Tag <TBODY> penutup selalu
boleh diabaikan
 Tag pembuka <THEAD> dan <TFOOT> disertakan jika tabel head dan tabel
foot ada, dan tag penutup </THEAD. Dan </TFOOT> boleh diabaikan
 THEAD, TFOOT dan TBODY harus berisi jumlah kolom yang sama
Contoh :
<html>
<head>
<title>TABLE</title>
<head>
<table border=1>
<caption align=top><h3>Penggunaan
YHEAD,TFOOT,TBODY</h3></caption>
<thead>
<tr><td><b>......informasi header.....</b></td>
<tfoot>
<tr><td><u><b>....informasi footer.....</b></u></td>
<tbody>

<tr><td>......baris pertama-block data satu......</td>

<tr><td>......baris kedua-block data satu....</td>
</tbody>
<tr><td>......baris pertama-block data kedua......</td>
<tr><td>......baris kedua-block data kedua....</td>
<tr><td>......baris kedua-block data kedua....</td>
</table> </body> </html>
III. ELEMEN COL DAN COLGROUP

Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian
atribut COL adalah :
<COL span|width>
Span adalah atribut yang mempunyai nilai integer > 0, yang digunakan untuk
menggabungkan kolom. Width digunakan untuk mengatur lebar kolom yang
digabung.
Elemen COLGROUP mengatur lebar dan perataan sekelompok kolom.
Untuk Contoh, jika sebuah tabel mempunyai 6 kolom dan diinginkan agar tiga
kolom pertama mempunyai lebar 50 pixel dan rata kiri, dua kolom kedua ingin
dengan lebar 100 pixel dan karakter rata pada titik desimal, sedang kolom
terakhir lebarnya berukuran sisa layar dengan rata kanan.
Untuk problem ini dibuat program sebagai berikut :
<colgroup width=”50px” align=left span=3>
<colgroup width=”100px” align=char char=”.” span=2>
<colgroup width=”100%” align=right>
IV. ELEMEN BARIS <TR>

Untuk membuat baris dalam tabel digunakan pasangan tag <TR>…</TR>.
Contoh :
<html>
<head>

</head>
<table>
<caption><b>Contoh penggunaan baris</b></caption>
<tr>.........Baris header..........</tr>
<tr>.........Baris data pertama...........</tr>
<tr>.........Baris data kedua...........</tr>

V. ELEMEN SEL <TH> DAN <TD>

Judul kolom atau judul baris dalam tabel dibuat dengan elemen
<TH>…</TH>. Contoh :
<html>
<head> <title>TABLE</title> <head>
<table border=5>
<caption align=top>WARNA PELANGI</caption>
<th>WARNA</th><th>WARNI</th><th>PELANGI</th>
<tr><td>MERAH</td><td>ORANGE</td><td>KUNING</td></tr>
<tr><td>HIJAU</td><td>BIRU</td><td>UNGU</td></tr>
VI. ELEMEN PERATAAN TABEL

Gunakan atribut ALIGN dan VALIGN untuk membuat rata teks dalam tabel.
 ALIGN digunakan untuk perataan teks secara horisontal, formatnya :
Align = left|center|right|justify|char
 VALIGN digunakan untuk perataan teks secara vertikal, formatnya :
Valign = top|middle|bottom|baseline
Contoh :
<html>
<body bgcolor=lightgrey> <table border=5>
<th>WARNA</th><th>WARNI</th><th>PELANGI</th>
<tr><td align=left valign=top>XYZ</td>
<td align=center valign=top>XYZ</td>
<td align=right valign=top>XYZ</td></tr>
<tr><td align=left valign=bottom>XYZ</td>
<td align=center valign=bottom>XYZ</td>
<td align=right valign=bottom>XYZ</td></tr>
<tr><td align=left valign=middle>XYZ</td>
<td align=center valign=middle>XYZ</td>
<td align=right valign=middle>XYZ</td></tr>

VII. ELEMEN CHAR

Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter.
Formatnya :
<TR ALIGN=CHAR CHAR=”.”>……..data tabel….</TR>
Contoh :
<html>
<h3>Mengatur perataan dengan char"."</h3>
<table border=5>
<colgroup>
<col><col align=”char” char=”.”>
<thead>
<TR><th>SAYUR<th>HARGA PER KILO
<TBODY>
<tr><td>Cabe Rawit</td><td>Rp3000,-</td>
<tr><td>Wortel</td><td>Rp2000,-</td>
<tr><td>Kol</td><td>Rp600,-</td>
VIII. ATRIBUT RULES DAN FRAME

Atribut frame digunakan untuk membuat frame suatu tabel. Atribut Frame
didefinisikan sebagai :
Frame =
void|above|below|hsides|lhs|rhs|vsides|box|border.
Atribut rules digunakan untuk mengatur interior tabel. Atribut rules didefinisikan
sebagai :
Rules = none|groups|rows|cols|all
Contoh :
<html>
<head>
</head>
<table border=5 frame="vsides" rules="cols">
<caption>Tabel dengan Frame dan Rules</caption>
<tr><td>1……</td><td>2……</td>><td>3……</td>
<tr><td>4……</td><td>5……</td>><td>6……</td>
<tr><td>7……</td><td>8……</td>><td>9……</td>
IX. MENGGABUNGKAN BARIS DAN KOLOM

Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN,
sedangkan atribut yang digunakan untuk menggabungkan baris adalah
ROWSPAN.
Contoh :
<html>
<table border=5>
<caption>WARNA PELANGI</caption>
<tr><th colspan=3>WARNA WARNI PELANGI</th></tr>
<tr><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
<tr><td>XYZ</td><td>XYZ</td><td rowspan=5>XYZ</td></tr>
<tr><td >XYZ</td><td>XYZ</td></tr>
<tr><td>XYZ</td><td>XYZ</td></tr>

X. ATRIBUT NOWRAP
Jika atribut ini digunakan dan isi teks melebihi lebar suatu sel, maka
sel itu akan diperpanjang sehingga seluruh isi teks muncul dalam satu baris.
Contoh :
<html>
<table border width=50%>
<caption>ATRIBUT NOWRAP</caption>
<tr><td width=20% nowrap>Lebar atribut
width tidak berpengaruh</td>
<td width=80%>Atribut nowrap digunakan</td></tr>
XI. MEMBUAT SEL KOSONG

Sel akan ditampilkan dengan space kosong, HTML juga menyediakan
entity &nbsp yang akan menampilkan tabel data kosong.
Contoh :
<html>
<H3>Contoh sel kosong</h3>
<table border>

<tr><td>MERAH</td><td> </td><td>KUNING</td></tr>
<tr><td>HIJAU</td><td>BIRU</td><td> </td></tr>
<tr><td>PINK</td><td>PUTIH</td><td> </td></tr>
</table>
<hr>
<br>
<table border>
<tr><td>COKLAT</td><td>&nbsp</td><td>NILA</td></tr>
<tr><td>UNGU</td><td>ABU ABU</td><td>&nbsp</td></tr>
<tr><td>JINGGA</td><td>MAGENTA</td><td>&nbsp</td></tr>
XII. LAYOUT TABEL

Untuk mengatur penampilan tabel, ada beberapa yang harus diperhatikan,
yaitu :
 Atribut Width yang digunakan untuk mengatur lebar tabel
 Atribut Height untuk mengatur tinggi tabel
 Atribut border untuk memberi border tabel
 Atribut Cellpadding digunakan untuk menentukan jumlah spasi yang
terdapat diantara border sel dengan isi yang ada didalam sel.
 Atribut Cellspacing digunakan untuk menentukan jumlah spasi yang
terdapat diantara dua buah sel dalam suatu tabel
Contoh :
<html>
<head><title>Tabel</title></head>
<body bgcolor=lightgrey> <h3>Pengaturan Layout Tabel</h3>
<table border=10 cellpadding=10 cellspasing=10 width=100%>
<tr><td>Width 100%</td>
<td>Border<br>Cellpadding=10<br>Cellspasing</td></tr>
<tr><td><table border=5 cellpadding=5 cellspasing=5 width=75%>
<tr><td>Width 75%</td>
<td>Border<br>Cellpadding=5<br>Cellspasing</td></tr>
</table> </td>

<td>Layout Tabel !</td>

</tr>
</tabel></body> </html>
XIII. MEMBERI WARNA PADA TABEL

 Atribut BGCOLOR untuk memberi warna background pada sel sebelum
berisi data
 Atribut BORDERCOLOR untuk mengubah warna border sel
Contoh :
<html>
<H3>Memberi warna pada tabel</h3>
<table border bordercolor=red bgcolor=white>
<tr><td>MERAH</td><td>UNGU</td><td>KUNING</td></tr>
<tr><td>HIJAU</td><td>BIRU</td><td>NILA</td></tr>
<tr><td>PINK</td><td>PUTIH</td><td>JINGGA</td></tr>
</table>
Memberi warna pada seluruh tabel
<hr>
<br>
<table border>
<tr bordercolor=red bgcolor=white>
<td>COKLAT</td><td>MERAH</td><td>NILA</td></tr>
<tr><td>UNGU</td><td>ABU ABU</td><td>BIRU</td></tr>
<tr><td>JINGGA</td><td>MAGENTA</td><td>HIJAU</td></tr>
</table>
Memberi warna pada satu baris
<hr>
<br>
<table border>
<tr>
<td bordercolor=red bgcolor=white>COKLAT</td>
<td>HIJAU</td><td>NILA</td></tr>
<tr><td>UNGU</td><td>ABU ABU</td><td>KUNING</td></tr>
<tr><td>JINGGA</td><td>MAGENTA</td><td>ORANGE</td></tr>
</table>
Memberi warna pada sel

</body> </html>
XIV. MENGGUNAKAN IMAGE SEBAGAI HEADER TABEL

Hal-hal yang perlu diperhatikan :
 Lebar tabel untuk tempat image menggunakan atribut WIDTH seperti
<TABLE WIDTH=300>
 Pada tag <TABLE> atribut CELLSPACING diset 0 agar image tepat berada
segaris dengan tabel
 Penggabungan kolom perlu dilakukan untuk menampung image.
Misalnya <TH COLSPAN=2> menggabungkan dua
kolom dalam tabel untuk tempat image
 Tag <IMG> harus digunakan untuk menyisipkan image BORDER=0
HEIGHT dan WIDTH harus diatur secara tepat.
Contoh :
<html>
<head><title>IMAGE</title></head>
<table border=0 cellpadding=2 cellspasing=0 width=500>
<tr><TH COLSPAN=2><IMG SRC=” E:\Image\STMIKsinus.jpg”
Border=0 Height=30 width=500></th></tr>
<tr><td valign=top><img src=” E:\Image\STMIKsinus.jpg”></td>
<td valign=top>
STMIK SINUS merupakan sekolah tinggi manajemen informatika
yang terletak
di jalan Samanhudi SOlo. Jenjang Diploma Tiga dan
Sarjana. Jurusan Manajemen Informatika, computer akuntansi,
sistem informasi dan Tehnik komputer.
</td></tr><hr>
<td align=middle>Desain by:LPK </tabel></body> </html>

XV. MERUBAH WARNA, UKURAN DAN JENIS FONT PADA TABEL

Contoh :
<html>
<head><title>TABLE</title><head>
<body bgcolor=lightgrey> <table border=5>
<th><font face="arial" color="blue" size=6>WARNA</font></th>
<th><font face="arial" color="blue" size=6>WARNI</font></th>
<th><font face="arial" color="blue"
size=6>PELANGI</font></th>
<tr><td><font face="Comic Sans MS"
color="green">MERAH</font></td>
<td>ORANGE</td><td>KUNING</td></tr>
<tr><td>HIJAU</td><td>BIRU</td><td>
<font face="Sherwood" color="red"
size=6>JINGGA</font></td></tr>

BAB IX
Form
Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:
<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Simpan dengan nama form1.htm di folder khusus untuk itu. Buka browser anda (Netscape
atau Internet Explorer), dan buka file form1.htm tadi. Biarkan Notepad tetap terbuka
sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik
tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di
Notepad.
Tuliskan form anda.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada
kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke
suatu program/script untuk diproses, atau 2) anda dapat meminta browser untuk
mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan
pemahaman tentang pemrograman web yang lebih lanjut. Cara kedua, biasa disebut
mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag <FORM>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www- form-

urlencoded">
</FORM>
</BODY>
</HTML>
Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan
alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di
atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar,
tetapi harus ada spasi di antara setiap atribut tadi... di antara FORM & METHOD, di

antara POST & ACTION, dan antara .xxx" & ENCTYPE.
Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...
NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13
&KOTA=Semarang&Propinsi=Jawa+Tengah
TEXT
Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di
antara tag <FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu
sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.
Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html
adalah TEXT.
<INPUT TYPE=TEXT>
Setiap masukan memerlukan nama (NAME).
<INPUT TYPE=TEXT NAME="ALAMAT">
Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan
menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah
dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No.
13.
Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31">
Jl. Lombok No.
Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali
anda mengubahnya.
Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas. Kita
dapat juga menentukan panjang kotak masukan.

<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=10>
Jl. Lombok
Jl. Lombok No.
Jl. Lombok No. 31
Seperti yang dapat anda lihat, nilai defaultnya adalah 20. Barangkali anda sudah tahu
bahwa nilai default adalah nilai yang dipakai browser jika anda tidak menentukan lain.
Kita lanjutkan, dan sekarang coba anda hapus VALUE="Jl. Lombok No. 31".
<INPUT TYPE=TEXT NAME="ALAMAT" SIZE=30>
Jika kita inginkan, kita dapat menentukan berapa banyak karakter yang bisa
diketikkan. Teruskan dan cobalah mengetikkan lebih dari 10 karakter!
<INPUT TYPE=TEXT NAME="ALAMAT" SIZE=30 MAXLENGTH=10>
Saya pikir pembatasan ini akan bisa bermanfaat. Tetapi, kecuali anda pikir
seseorang akan menuliskan seluruh isi bab ini ke dalamnya, saya tidak akan terlalu
menguatirkan hal ini.
Sangat mirip dengan TYPE=TEXT adalah TYPE=PASSWORD. Persis malah, kecuali

bahwa yang ditampilkan adalah *** dan bukan apa yang diketikkan. Browser akan
mengirim data sebenarnya kepada anda, hanya data ini tidak akan tampil di layar.
<INPUT TYPE=PASSWORD>
Ingat bahwa setiap <INPUT> harus memiliki NAME.
<INPUT TYPE=PASSWORD NAME="KATA SANDI">

Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih
ingat bahwa <TAG> memberi perintah kepada browser untuk melakukan sesuatu,
sedangkan ATTRIBUTE dituliskan di dalam <TAG> dan menentukan caranya.
RADIO BUTTONS DAN CHECK BOXES
Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan
kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih
satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
Tambahkan 2 lagi.

Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR>

<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><P>
Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan
segera tampak berikut ini.
Setiap Radio Buttons harus diberi VALUE.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR>

<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>
Sekarang beri nama masing-masing.

<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"> Edi Hasibuan<BR>

<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P>
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Anda dapat gunakan tag html yang lain di sini.
Pada prinsipnya Radio Buttons anda sudah selesai. Anda dapat memperjelas pilihan
ini dengan menambahkan suatu kalimat di atasnya dan, jika anda mau, memilih satu
di antaranya sebagai default (optional).
Siapakah TEMAN BAIK anda?<BR>

<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed" CHECKED> Edi Hasibuan<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P>
Siapakah TEMAN BAIK anda?

Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Kita tentu saja hanya dapat memilih satu di antaranya. Pilihan ini akan
menghasilkan pasangan nama/nilai seperti TEMAN BAIK=Ed (atau siapa pun yang dipilih).
Untuk membuat Check Boxes kita lakukan hal yang sama dengan tadi. Mulailah
dengan ini...
<INPUT TYPE=CHECKBOX NAME="Ed">
Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga
baris baru untuk setiap pilihan.)
<INPUT TYPE=CHECKBOX NAME="Ed"><BR>

<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>

Setiap Check Box kita beri VALUE yang sama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"><BR>

<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"><P>
Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya
tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap.
OK, masing-masing kita beri label/nama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR>

<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih
beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.
Siapakah di antara mereka yang merupakan sahabat anda?<BR>

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Siapakah di antara mereka yang merupakan sahabat anda?

Edi Hasibuan Ricky
Martanto
Tomi Sudarto
Baramuli
Kita dapat memilih 1, 2, tidak ada atau semuanya. Pilihan tersebut akan kita
dapatkan dalam bentuk pasangan nama/nilai....

Ed=YA Tom=YA
(atau apapun yang dipilih... jika tidak ada yang yang dipilih, browser tidak akan
memberi apapun)
Anda mungkin bertanya-tanya....Bagaimana jika saya ingin mengajukan 3 pertanyaan

berbeda untuk kelompok yang sama?? Bagaimana saya bisa melakukannya?
Ingat! Dalam sebuah form html tidak boleh ada NAME yang sama. Jadi, kita harus
menggunakan nama yang berbeda untuk setiap pertanyaan. Yang saya maksud dengan
tidak boleh, bukan berarti komputer anda bisa rusak.... paling-paling hal ini akan
membingungkan browser, atau program parser (Mailto Formatter adalah program parser),
atau cgi script yang memprosesnya. Paling tidak ini akan membingungkan anda dalam
mengartikan data dari form tersebut.
Berikut ini adalah perintah html untuk 3 pertanyaan tadi. Tag untuk membuat
<TABLE> ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna
tersebut tidak ada pengaruhnya terhadap jalannya form.
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
Siapakah di antara mereka yang merupakan sahabat anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=200>
Siapakah di antara mereka yang akan anda pinjami uang?<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=199>
Siapakah yang anda ijinkan berkencan dengan adik anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Tom" VALUE="YA"> Tomi Sudarto<BR>

<INPUT TYPE=CHECKBOX NAME="Kencan?...BM" VALUE="YA"> Baramuli<P>

</TD>
</TR></TABLE>
</CENTER>
Misalkan anda memilih seperti berikut....
...maka anda akan mendapatkan hasil pasangan nama/nilai berikut.
Teman?..Ed=YES
Teman?..Rick=YES
Teman?..Tom=YES
Utang?...Tom=YES
Utang?...BM=YES
Kencan?...Ed=YES
Kencan?...Tom=YES
Kencan?...BM=YES
PULL DOWN LIST DAN SCROLLING LIST
Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda
gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag
penutup. Mari kita coba.
<SELECT>
</SELECT>
Jangan lupa beri nama.
<SELECT NAME="TEMAN BAIK">

</SELECT>
Kemudian tambahkan beberapa option.

<OPTION>Edi
<OPTION>Ricky
<OPTION>Tomi
<OPTION>Reza
</SELECT>

Edi
Dan setiap <OPTION> kita beri VALUE.

<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
</SELECT>
Edi
Defaultnya adalah pilihan pertama dalam daftar.
Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam
daftar.

<OPTION VALUE="Tomi" SELECTED>Tomi
</SELECT>
Tomi
Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List .
Pertama-tama kita tambahkan dulu beberapa nama.

<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>
Edi
Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling
List adalah menambahkan atribut SIZE pada tag <SELECT>.
<SELECT NAME="TEMAN BAIK" SIZE=4>


</SELECT>
Edi
Ricky
Tomi
Reza
Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan.
Gampang, kan?
Sekali lagi, defaultnya adalah pilihan pertama pada <OPTION>, dan seperti tadi kita
dapat mengubahnya dengan memilih yang lain.
<SELECT NAME="TEMAN BAIK" SIZE=4>

<OPTION VALUE="Tomi" SELECTED>Tomi
</SELECT>
Edi
Ricky
Tomi
Reza
TEXTAREA
Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>.
<TEXTAREA NAME="KOMENTAR">
</TEXTAREA>
Anda menentukan besarnya kotak masukan dengan cara....
<TEXTAREA NAME="KOMENTAR" ROWS=6 COLS=50>

</TEXTAREA>

ROWS adalah tingginya, COLS adalah lebarnya.
Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada
browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.
Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL>

</TEXTAREA>
DDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDD DD
WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan
diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat
panjang yang tidak terputus.
Lakukan hal yang sama dengan ini....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=PHYSICAL>

</TEXTAREA>
DD
WRAP=PHYSICAL artinya kalimat panjang akan ditampilkan lebih dari satu baris,
dan akan disimpan dalam bentuk itu juga.
Sekarang anda coba yang ini untuk melihat bedanya....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=OFF>

</TEXTAREA>
DDDDDDDDDDDDDDD

Ini adalah defaultnya.

WRAP=OFF artinya kalimat panjang tidak akan ditampilkan berganti baris, tetapi akan
disimpan dalam bentuk persis seperti yang anda ketikkan. (Cobalah dengan
mengetikkan ENTER.)
HIDDEN INPUT
Bentuk lain dari masukan adalah HIDDEN input.
<INPUT TYPE=HIDDEN NAME="RAHASIA" VALUE="Form 1">
HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak
akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh
Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan
diprosesnya.
Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form
html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda
tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web
site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web
site mana yang memberikan kontribusi terbanyak. Apa
yang akan anda lakukan?
Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web

site pertama
site kedua
site ketiga
Dan seterusnya dan selanjutnya....
Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini
(bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk
memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh
berikut ini tetap merupakan HIDDEN input yang sah....
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2
HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script.
Bentuk terakhir dari input adalah tombol SUBMIT dan RESET. Kedua
perintah ini sangat sederhana....
<INPUT TYPE=SUBMIT>

Submit Query
SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form....
...dan RESET, menghapus seluruh isi form.
<INPUT TYPE=RESET>
Reset
Kita dapat mengubah tulisan pada tombol tersebut dengan mudah.
<INPUT TYPE=SUBMIT VALUE="Kirim data ini!"><BR>

<INPUT TYPE=RESET VALUE="Hapus isi form!"><P>
Kirim data ini!
Hapus isi f orm!
Bila perlu, tombol SUBMIT bisa anda beri nama/NAME. Anda akan
memerlukannya jika, dengan alasan apapun, ada lebih dari satu tombol SUBMIT.

BAB IX
HTML5
Pemrograman HTML mengalami perkembangan, standart terbaru HTML

adalah HTML5 yang dirilis pada tahun 2010. HTML5 merupakan salah satu karya
Konsortium Waring Wera Wanua(World Wide Web Consortium, W3C) dan dan IETF
(Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML
sejak versi 2.0. HTML5 memiliki beberapa kelebihan diantaranya :
 HTML5 dirancang khusus untuk menangani konten website
tambahan plugin (seperti flash)
 Penanganan kesalahan yang lebih baik
 HTML5 memiliki elemen semantik, gambar dan multimedia baru tanpa
memerlukan
 HTML5 mempunyai elemen form baru dan API baru sehingga
pengembangan aplikasi web lebih mudah
 HTML5 merupakan cross-platform, dirancang untuk bekerja pada
beberapa tipe perangkat keras (PC, Tablet, Phone, TV, dll)
Format penulisan sintak HTML5 secara umum masih seperti format HTML
versi sebelumnya. HTML5 menggunakan encoding (charset) UTH-8 yang
didefinisaikan pada setiap halaman html. Format Sintak HTML5 seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Ada beberapa elemen baru yang disediakan pada HTML5 untuk mendukung
pembuatan halaman website modern seperti : header, footer, navigation bars, sidebars
dan sebagainya.
Fitur Baru yang terdapat pada HTML 5

Beberapa fitur baru yang paling menarik di HTML5 adalah:

• Elemen <canvas> untuk gambar 2D
• Elemen <video> dan elemen <audio> untuk media pemutaran
• Dukungan untuk penyimpanan lokal
• Elemen tertentu-konten baru, seperti <article>, <footer>, <header>, <nav>,
<section>
• Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url, pencarian
HTML5 memiliki beberapa jenis bentuk inputan baru. Fitur-fitur baru memungkinkan
kontrol input dan validasi yang lebih baik.
• Color : untuk membuat pilihan input untuk memilih warna
Select your favorite color: <input type="color" name="favcolor">
• date : untuk membuat pilihan yang hanya bisa memilih date tertentu
Birthday: <input type="date" name="bday">
• email : untuk membuat inputan yang hanya bisa memasukkan alamat email (
harus ada tanda @ nya )
E-mail: <input type="email" name="email">
• search : untuk membuat inputan untuk direct search ke google
Search Google: <input type="search" name="googlesearch">
• time : untuk membuat pilihan inputan time
Select a time: <input type="time" name="usr_time">
• url : untuk membuat inputan yang sifatnya link ke page lain
Add your homepage: <input type="url" name="homepage">
Elemen Semantic Baru di HTML5
Banyak situs web yang ada saat ini mengandung kode HTML seperti ini: <div id="nav">,
<div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header,
dan footer.
HTML5 menawarkan elemen semantik baru yang lebih jelas untuk mendefinisikan
bagian yang berbeda dari sebuah halaman web, misalkan apabila kita membuat tag
<aside> otomatis akan membuat dokumen di bagian side, kalau membuat tag <footer>
otomatis akan membuat dokumen di bagian bawah:

• <header>
Elemen <header> menentukan header untuk dokumen atau bagian. Unsur <header>
harus digunakan sebagai wadah untuk konten pengantar. Anda dapat memiliki
beberapa elemen <header> dalam satu dokumen.
Contoh berikut mendefinisikan header untuk header sebuah artikel:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
• <nav>
Elemen <nav> mendefinisikan satu set link navigasi. Unsur <nav> ditujukan untuk blok
besar link navigasi. Namun, tidak semua link dalam dokumen harus berada di dalam
elemen <nav>!
Contoh :
<nav>
<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
• <section>
Elemen <section> mendefinisikan bagian dalam sebuah dokumen. Menurut
dokumentasi HTML5 W3C: "Section adalah pengelompokan tematik konten, biasanya
dengan judul."
Contoh :
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
• <article>
Unsur <article> menetapkan spesifikasi yang independen, konten berdiri sendiri.
Sebuah artikel harus masuk akal dan harus mungkin untuk didistribusikan secara
mandiri dari sisa situs web.
Contoh di mana elemen <article> dapat digunakan:
• Forum post
• Blog post
• News story
• Comment
Contoh :
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
• <aside>
Unsur <aside> mendefinisikan beberapa konten selain dari konten itu di ditempatkan
(seperti sidebar).
Samping konten harus berkaitan dengan isi sekitarnya.
Contoh :
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
• <footer>
Elemen <footer> menetapkan footer untuk dokumen atau bagian. Unsur <footer> harus
berisi informasi tentang elemen yang mengandung. Sebuah footer biasanya berisi
penulis dokumen, informasi hak cipta, link ke persyaratan penggunaan, informasi
kontak, dll . Kita dapat memiliki beberapa elemen <footer> dalam satu dokumen.
Contoh :
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Canvas pada HTML 5

Apa itu Canvas?
Elemen <canvas> digunakan untuk menggambar grafik di canvas melalui scripting
(JavaScript biasanya).
Unsur <canvas> adalah wadah untuk kita menggambar grafis. Kita harus menggunakan
script untuk benar-benar membuat grafis. Kanvas memiliki beberapa metode untuk
gambar path, kotak, lingkaran, teks, dan menambahkan gambar.
Cara Membuat Canvas
Sebuah kanvas adalah area persegi pada halaman HTML, dan itu ditentukan dengan
elemen <canvas>.
Note: Secara default, <canvas> element tidak ada border dan tidak mempunyai
element.

<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Selalu tentukan atribut id (yang akan disebut di script), dan lebar dan tinggi atribut
untuk menentukan ukuran kanvas.
Tip: Kita dapat memiliki beberapa elemen <canvas> pada satu halaman HTML.
Menggambar di Canvas dengan JavaScript

Semua penggambaran di kanvas harus dilakukan dengan javascript :
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
HTML5 Video
Video on the Web
Sebelum HTML5, video hanya bisa dimainkan dengan plug-in (seperti flash).
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk
menanamkan video atau film pada halaman web, dengan memggunakan elemen
<video>.
Untuk menampilkan video di HTML5, berikut adalah minimal kodingan yang diperlukan :
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML5 Audio
Audio on the Web
Sebelum HTML5, file audio hanya bisa dipasang dengan plug-in (seperti flash).
HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk
menanamkan file audio pada halaman web: elemen <audio>.
Untuk memutar sebuah audio di HTML5, berikut ini kodingan minimal yang dibutuhkan
:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML5 Web Storage

Apa itu HTML 5 Web Storage?
Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser
pengguna.
Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman
dan lebih cepat. Data ini tidak termasuk dengan setiap permintaan server, tetapi
digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data
dalam jumlah besar, tanpa mempengaruhi kinerja website.
Data disimpan dalam pasangan nama / nilai, dan halaman web hanya dapat
mengakses data yang tersimpan dengan sendirinya.
Tidak seperti cookie, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan
informasi tidak pernah ditransfer ke server.
HTML5 Web Storage Objects
HTML5 Web Storage menyediakan dua objek baru untuk menyimpan data pada klien:
• window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
• code.sessionStorage - menyimpan data untuk satu sesi (data hilang ketika tab ditutup)
Sebelum menggunakan penyimpanan web, memeriksa dukungan browser untuk

localStorage dan sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}

else
{
// Sorry! No Web Storage support..
}
HTML5 Inline SVG

Apa itu SVG?
• SVG singkatan dari Scalable Vector Graphics
• SVG digunakan untuk mendefinisikan grafis berbasis vektor untuk Web
• SVG mendefinisikan grafis dalam format XML
• Grafis SVG tidak kehilangan kualitas jika mereka memperkecil atau diubah ukurannya
• Setiap elemen dan setiap atribut dalam file SVG dapat animasi
• SVG adalah rekomendasi W3C
Contoh kodingan untuk inline SVG :
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">

<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

BAB XI
CSS (Cascading Style Sheets)
Pengertian CSS
Jika anda belum memahami HTML, saya sarankan untuk mempelajarinya terlebih
dahulu, karena untuk mendalami CSS, memerlukan sedikit pengetahuan tentang
HTML.
HTML dan CSS adalah bagian tak terpisahkan dari website modern saat ini. HTML
digunakan untuk membuat konten atau kerangka logis dari halaman web, sedangkan
CSS digunakan untuk mengatur tampilan dari website, seperti warna dan font yang
digunakan.
CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Dalam
bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang
digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup
ini salah satunya adalah HTML.
Secara sederhana, CSS adalah kumpulan kode program yang digunakan untuk
mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa
mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua
kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling
melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web.
Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya,
“HTML for content, CSS for Presentation”.
Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang
semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf
bewarna merah dengan menulis langsung kode tersebut dengan tag HTML, atau
membuat latar belakang sebuah halaman dengan warna biru. Kira-kira kode HTML
untuk hal itu adalah sebagai berikut simpan dengan nama latihan1css.html:

untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah seperti kode
HTML diatas menggunakan tag <font>. Hal ini tidak salah, dan semuanya berjalan
sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste
tag <font color=”red”> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan
karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka
akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per
halaman. Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten.
Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS, simpan
dengan nama latihan2css.html:

Dalam contoh CSS diatas, tag <font> dirubah menjadi tag <span>. Tag <span> sendiri
merupakan tag yang tidak bermakna, namun bisa di kostumasi oleh CSS. Tag span ini
ditambahkan atribut class=”warna”. Atribut ini berguna untuk memasukkan kode CSS
pada tag <style> di bagian head.
Perbedaan Antara tag Span dan tag Div

Secara garis besar, tag dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line
dan In-line.
Jenis tag Block-line atau Block-style yaitu tag yang secara otomatis
menambahkan spasi (enter) di akhir tag, dan membuat tag tersebut berdiri sendiri,
sehingga tag setelahnya akan tampil di baris yang baru. Contoh tag Block-line yaitu
tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>).
Jenis tag in-line atau inline style adalah tag yang tidak menambahkan spasi di
akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris
yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag
penebalan (<strong> atau <b>) dan tag link (<a>).
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam
in-line tag.
Namun jika kedua tag ini tidak memiliki fungsi tertentu, jadi digunakan untuk apa?
Justru karena tidak memiliki fungsi dasar inilah kedua tag ini dapat berfungsi sebagai
tag dasar yang fungsi dan isinya dapat di buat ulang menggunakan CSS.
Contoh penggunaan kedua tag dapat dilihat dalam kode HTML berikut, savelah
sebagai spandiv.html
Contoh penggunaan tag div dan span:

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal merubah isi dari CSS
color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan
otomatis berubah menjadi biru.CSS memungkinkan kita merubah tampilan dari
halaman, tanpa mengubah isi dari halaman.
Cara Menginput Kode CSS ke Halaman HTML
HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki
bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan
untuk mendesain tag-tag HTML ini.
Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style,
Internal Style Sheets, dan External Style Sheets.
Metode Inline Style
Metode Inline Style adalah cara menginput CSS langsung kedalam tag HTML yang
diperlukan dengan menggunakan atribut style, contoh penggunaan Metode Inline Style
CSS adalah sebagai berikut, simpan dengan nama latihan3css.html:
Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari atribut style ini
adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena
kode CSS langsung tergabung dengan HTML, dan belum memenuhi tujuan dibuatnya
CSS agar desain terpisah dengan konten.
Metode Internal Style Sheets
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan
untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML.
Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah
tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan motode internal style sheets CSS, simpan dengan nama
latihan4css.html:

Co
ntoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style,
karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada
tag head dari HTML.
Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa
halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-
masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external
style sheets.
Metode External Style Sheets
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat
beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki
kode CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut
kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap
halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama
kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai
belajar.css
Isi dari file belajar.css :
Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali
ini, savelah pada folder yang sama dengan halaman HTML yang sudah dibuat.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS
tersebut ke halaman HTML, yang pertama adalah menggunakan @import
Contoh penggunaan @import CSS, simpan dengan nama latihan5css.html:
Un
tuk metode @import external style sheets ini, kita menyisipkan @import
url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa alaman relatif
(seperti: folderku/belajar.css) maupun absolut (seperti www.belajar.com/belajar.css).
Cara input kedua external style sheets, adalah menggunakan tag <link>. Berikut
contohnya, simpan dengan nama latihan6css.html:
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag
<link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling
direkomendasikan adalah metode external style sheets, baik menggunakan @import
maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan,
seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin
mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS
saja.

Pengertian Selector, Property dan Value pada CSS
Pengertian Selector CSS
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS
dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri. Efisiensi dari selector
ini tergantung dari desain dan kemampuan programmer dalam memakainya. Mengenai
selector, akan kita bahas secara lebih detail dalam tutorial CSS selanjutnya.
Pengertian Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag
HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil
akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk
seluruh selector. Contoh dari properti seperti: font, boder, padding, dan background-
color.
Pengertian Value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color
yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau
nilainya dapat berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada
gambar dibawah ini:

Aturan dan Cara Penulisan Kode CSS
Untuk lebih mudah memahami, dibawah ini adalah contoh kode CSS:
body {
font-size: 14px;
color: navy;
}
p {
background-color:white;
color:black;
font-weight:bold;
}
h1, h2 {
text-decoration: underline
}
Seperti yang dapat kita lihat dari contoh diatas, aturan penulisan CSS adalah:
 Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p,
h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada
contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut,
digunakan tanda koma (,)
 Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya),
berada di antara kurung kurawal “{“ dan “}”.
 Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma
(;)
 Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
 Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda
hubung (-), contohnya: background-color dan border-left.
 Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’
sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena
bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti
lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-
decoration: underline”.
Mengenal Jenis-jenis Selector Dasar CSS
Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di
dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari
seluruh tag h1 yang memiliki atribut class=judul.
CSS memiliki banyak selector, kita akan membahasnya satu persatu:
Universal Selector
Universal selector hanya ada 1 di CSS, yaitu tanda bintang “*”. Selector ini bertujuan
untuk ‘mencari’ semua tag.

Contoh Universal Selector CSS:
* {
color: blue;
background-color: white;}
}
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan
background berwarna putih.
Element Type Selector
Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya
adalah tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan
seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan
seluruh tag <p> akan berukuran 14pixel.
Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag
<p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui
tag penutup </p>.
Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class
dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai
atribut class. Contohnya:
<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>
<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag kita menambahkan atribut class dengan nilainya
adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari
1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir contoh diatas,tag h2 memiliki atribut class=”judul

penting berwarna”, yang teridiri dari 3 class, yaitu judul, penting, dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px
}
Untuk class selector, CSS menggunakan tanda titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text
akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
ID Selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum

dan paling sering dipakai. Penggunaan ID selector hampir sama dengan class selector,
dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag
HTML, untuk ID selector, kita menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>
<h2 id=”sub_judul”>Sub Judul Artikel<h2>
Atribut id selain untuk selector CSS juga berperan sebagai kode unik untuk masing-
masing tag. Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama.
Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web
dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}

CSS menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang
memiliki id tersebut.
Attribute Selector
Selector dasar terakhir kita adalah attribute selector, dimana selector ini akan mencari
seluruh tag yang memiliki atribut yang dituliskan.
Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada
diantara tanda kurung siku “[” dan “]”.
[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href
(href biasanya terdapat pada tag <a>). Untuk contoh [type="submit"] akan cocok
dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah
tombol submit dalam form.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut
selector ini tidak terlalu sering digunakan.

BAB XII
CSS BOX MODEL
Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada
dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. 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.
Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya
tampilkan sebuah illustrasi box model
penjelasan:
• 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

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar
dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada
sebuah div yang berukuran lebar 300px dan tinggi 200px
div.column {
width:300px;
height:200px;
margin:10px;
border:5px solid #000;
padding:10px;
}
berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel,
melainkan 350 pixel x 250 pixel
• Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas

kanan (margin:10px + border:5px + padding:10px)
• Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas
bawah (margin:10px + border:5px + padding:10px)
• Total lebar 350px dan tinggi 250px
i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema
untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang
sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk
menyelesaikan masalah ini
i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat,
supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi
komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div.column {
width:300px;
height:200px;
margin:10px;
border:5px solid #000;
padding:10px;
}
</style>
</head>
<body>
<div class="column"> Test </div>
</body>
</html>

Penggunaan Border
Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty
border-width digunakan untuk menentukan lebar dari border, border-color untuk warna
dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis
lurus, putus-putus, atau garis titik-titik.
Cara menuliskan border adalah sebagai berikut:
div.column {
width:200px;
height:20px;
border-width:5px;
border-color:#39F;
border-style:solid;
}
/* CSS border diatas bisa juga dituliskan seperti ini*/
div.column {
width:200px;
height:20px;
border:5px #39F solid;
}
Hasilnya dari penerapan border diatas :
Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah


Penggunaan Outline
Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di
luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan
border, sedangkan property dari outline dapat dilihat pada tabel dibawah

Penggunaan Margin
Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai
microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja.
Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property
margin pada CSS dapat di lihat pada tabel di bawah.

Penggunaan Padding
memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background
tapi tergantung dari warna background content berikut saya berikan sampel
penggunaan padding dan border bersamaan:
div.column {
width:200px;
height:20px;
padding 20px;
border:5px #39F solid;
}
Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada
border diatas akan terlihat perbedaanya:
Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah


BAB XII
HTML – CSS lanjutan
Cara Penggunaan Selector CSS
Pada materi CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu
Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute
Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi
sebuah selector yang lebih spesifik.
CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi

sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag
<em> yang berapa pada tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat
tag <a> dengan class “judul”.
Agar mudah memahami cara penggabungan selector CSS ini kita akan mempersiapkan
sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML
berikut, dan save sebagai belajar_css1.html
Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag
header (<h2>), paragraf(<p>), dan list (<ol>).
Perhatikan juga pada bagian <head> dari belajar_css.html tersebut diberikan tag
<style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang
ada juga telah memiliki atribut seperti “class” dan “id” yang siap di-“style” menggunakan
CSS.

Tujuan pertama kita, adalah:

1. Membuat seluruh tag header <h2> berwarna biru
Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS
Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bagian
head:
h2 {
color: blue;
Tujuan kedua adalah :

2. Membuat seluruh tag header <h3> juga berwarna biru
Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh <h2>
sebelumnya, sebagai berikut:
h2 {
color: blue;
h3 {
color: blue;
Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang
sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi:
h2 , h3 {
color: blue;
Tanda koma (“,”) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag
akan berwarna biru. Tidak ada batasan seberapa banyak selector yang bisa digunakan.
Katakan kita ingin seluruh tag header dari <h1> sampai <h6> bewarna biru, maka kode
CSSnya adalah:
h1 , h2, h3 , h4, h5 , h6{
color: blue;
Tujuan ketiga :
3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah
Jika yang kita maksud adalah seluruh tag <strong> dimanapun berada, maka kode
CSSnya cukup sebagai berikut:

strong {
color:red;
Namun jika ditambahkan syarat hanya yang berada di dalam tag <p>, maka kita harus
menyeleksinya menjadi:
p strong {
color:red;
Maksud dari kode “p strong” adalah seluruh tag <strong> yang berada di dalam tag
<p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi.
Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit,
sehingga kita menginginkan warna merah untuk “seluruh tag <i> yang berada di dalam
tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>”, maka kode
CSSnya adalah:
h2 span i {
color:red;
Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling
terakhir, dimana dalam contoh diatas, hanya tag <i> saja yang akan bewarna merah.
Tujuan keempat kita:

4. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang memiliki
class paragraf menjadi italic (huruf miring)
Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali
ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:
h2.judul , .paragraf {
font-style: italic;
h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan
.paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun
tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p
dengan id “belajar_css” dan seluruh tag h3 yang memiliki class “subheader”

Tujuan diatas terkesan rumit, namun jika anda telah paham tujuan 1 sampai dengan 4
sebelumnya, maka kode CSS berikut akan menjelaskannya:
#belajar_html, p#belajar_css, h3.subheader {
font-size:14pt;
Sebagai penutup, hasil akhir dari halaman HTML belajar_css2.html kita adalah
sebagai berikut
Sampai disini setidaknya kita sudah bisa membaca maksud dari sebagian besar
selector dalam CSS. Sebagai contoh, anda tentunya tidak bingung membaca kode CSS
berikut:
table#daftar_hadir, table#daftar_kuliah {

font-size:14pt;
div.header, div.footer, div#main_menu {
width:960px;
Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan
kita pelajari nantinya), contoh selector CSS yang kedua ini merupakan selector yang
sering digunakan untuk manipulasi tag div dalam merancang desain web
Urutan Prioritas Selector CSS (Cascading)
Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam bagian
ini akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag
HTML.
CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa
inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS,
maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain
sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.
Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada
artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat
dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet,
internal style sheet, dan inline style CSS.
Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS
menggunakan external style sheet, untuk merubah warnanya menjadi biru. Namun
pada saat yang sama juga membuat internel style sheet untuk mengubahnya menjadi
warna merah, maka warna apakah yang akan tampil di browser?
Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama,

buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode
CSS berikut:
Lalu sebagai sample HTML, digunakan prioritas.html, savelah kedua file pada folder
yang sama:

Perhatikan bahwa sebelum tag <style>, kode tersebut “memanggil” file prioritas.css
terlebih dahulu. Lalu pada tag <h2> yang kedua saya menambahkan atribut
“color:green” pada tag <h2>.
Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan
bewarna merah dan biru, dan tidak ada yang bewarna biru.
Dari contoh sederhana kita diatas, tag <h2> sebenarnya dikenakan 3 kode CSS yang
sama secara bersamaan, namun hanya ada satu kode yang akan “menang”.
Dalam masalah ‘timpa-menimpa’ ini, CSS memiliki aturan prioritas tersendiri. Jika
terdapat property CSS yang saling ‘bentrok’, maka urutan prioritasnya adalah sebagai
berikut (dari yang paling kuat):
1. Inline style, yakni style yang langsung melekat pada tag.

2. Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>)
3. Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil
melalui tag <link> atau @import
Maka jika melihat sekali lagi kode HTML diatas, text “Akan berwana apa saya?..1” akan
berwarna merah karena internal style color:red lebih mendapat prioritas daripada
external style color:red. Sedangkan text “Akan berwana apa saya?..2” berwarna hijau
karena inline style color:green lebih mendapat prioritas daripada external style
color:blue maupun internal style color:red.
Selain prioritas antar “sumber” kode CSS tersebut, proses cascading atau prioritas CSS
juga masih berlanjut untuk kode CSS dalam file yang sama.

Urutan Prioritas Selector CSS (Specificity)
Jika pada bagian sebelumnya kita telah membahas tentang urutan prioritas CSS
berdasarkan sumber kode CSS tersebut, dimana inline style merupakan prioritas
terkuat, pada bagian ini kita akan melihat urutan prioritas kode CSS dalam file yang
sama. Dalam kasus ini kita akan membuat beberapa kode CSS yang saling menimpa.
Agar lebih mudah dipahami, kita akan membuat file sample, yaitu spesifik.html :
Sebelum anda menjalankan file spesifik.html tersebut, silahkan pelajari terlebih dahulu
defenisi CSS diatas, dan tebak akan bewarna apa paragraf “Sedang Belajar CSS…”.
Dan, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana
selector CSS “#aaa” adalah tempat pendefenisisan warna “color:orange”, namun
bagaimana ini bisa terjadi?
CSS memiliki aturan tertentu tentang hal ini, yaitu ketika sebuah property dari CSS,
saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.

Aturan ke-spesifik-an CSS dihitung menggunakan 4 digit, contohnya: 0,1,0,0.

Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih
besar dari 0,0,1,5.
1. Setiap element/tag selector bernilai 0,0,0,1

2. Setiap class selector, attribut selector bernilai 0,0,1,0
3. Setiap ID selector bernilai 0,1,0,0
4. Setiap inline style bernilai 1,0,0,0
Dengan menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an dalam
contoh sebelumnya.
1. Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1

2. Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
3. Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
4. Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
5. Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya:
0,0,1,2
Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling tinggi, yaitu
0,1,0,0. Maka, karena itulah paragraf dalam contoh spesifik.html akan bewarna
orange.
Namun sering kali dalam merancang sebuah website yang cukup kompleks, kita akan
sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah
kode HTML yang ada. Memahami aturan prioritas dan ke-spesifik-an CSS ini sangat
penting untuk menghindari hal tersebut.
Mengenal perintah !important
Jika aturan prioritas diatas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu
menggunakan perintah !important.
Perintah !important diletakkan di belakang property dari CSS, dan perintah !important
ini akan mengabaikan urutan prioritas CSS diatas. Mari kita ubah spesifik.html dengan
menambahkan !important.

Perhatikan akhir baris pada selector p, ditambahkan perintah !important diakhir

property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.
Penggunaan !important sebaiknya digunakan jika memang sudah terdesak, dan

sedapat mungkin dihindari, karena akan mengubah urutan prioritas, dan akan
menyulitkan perancangan CSS.
Dari bagian ini, bisa dikatakan perancangan kode CSS sebenarnya lebih condong ke
seni daripada pemograman, karena selain memikirkan bagaimana tampilan web, kita
juga harus memperhatikan aturan prioritas dan ke-spesifik-an CSS tersebut.
Mengenal Sifat Penurunan Dalam CSS (Inheritance)

Inheritance dalam CSS adalah penurunan property CSS dari tag HTML yang satu
kepada yang lainnya. Syarat untuk inheritance, tag tersebut harus berada di dalam tag
induknya. Sebagai contoh, perhatikan potongan HTML berikut ini:
<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div>
Dari contoh diatas, tag <p> merupakan berada di dalam tag <div>, sehingga dapat
dikatakan tag <div> adalah induk (parent) dari tag <p>, tag <em> yang berapa di
dalama tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Jika kita membuat kode CSS sebegai berikut:

div {
color:green;
}
Maka efek dari kode CSS tersebut akan diturunkan (inherit) kepada seluruh tag yang
berada di dalam tag <div>, atau dengan kata lain kode CSS diatas, secara tidak
langsung bermaksud:
div, div p, div p em {
color:green;
}
Namun tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property
border, hanya berlaku untuk satu tag induk saja.
Property seperti background-color yang digunakan untuk mengubah warna latar

belakang sebenarnya juga tidak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini
terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana
warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna
seperti induknya.
Mengenal nilai property inherit
Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property inherit. Sebuah
property jika diberi nilai inherit, property tersebut akan mencopy nilainya dari nilai
property induk dari tag tersebut. Sebagai contoh, karena property border secara default
tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:

Dari kode diatas dapat dilihat kita menggunakan dua kalimat yang memiliki class
berbeda. Pada class=”satu”, saya hanya membuat property border dan color pada tag
div.satu. namun keseluruhan kalimat akan memiliki warna biru (sesuai dengan sifat
inheritance-nya), namun border hanya satu.
Pada kalimat kedua, ditambahkan property inherit pada tag <p>, maka kalimat kedua
tersebut akan memiliki 2 buah border, satu dari tag <div>, dan yang kedua dari tag
<p>.
Sifat inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin
membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat
style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup sebagai
berikut:
body {
font-size: 14px;
}
Sehingga seluruh tag yang berada di dalam tag body (hampir semua tag merupakan
child dari tag body), ukuran fontnya akan berubah menjadi 14px.
Penulisan Kode Warna pada CSS
Desain bermain di warna. Oleh karena itu, pada bagian ini kita akan membahas cara
penulisan kode warna pada CSS. CSS memiliki banyak variasi nilai warna yang bisa
kita gunakan.
Mengenal model RGB
Dalam desain di media visual seperti televisi maupun monitor komputer, model warna
yang digunakan adalah model warna RGB (Red Green Blue). Disebut RGB, karena
warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning,
coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.
Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini
berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna
dasar ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna
maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit
warna, atau disebut juga true color.
Misalkan, untuk mendapatkan warna kuning, sebenarnya warna kuning adalah

perpaduan warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita
harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.
Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi
hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.

Format #RRGGBB
Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk CSS.
Dimana RR adalah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru.
Masing-masing nilai ini berisi angka 00 sampai dengan FF. Kenapa FF? Karena CSS
menggunakan angka hexadesimal. FF adalah nilai maksimal, equivalen dengan 255
dalam nilai desimal
Contohnya, #FF0000 adalah warna merah ‘murni’, #00FF00 adalah warna hijau murni,
sedangkan #777777 adalah kode untuk warna silver.
Format #RGB
Selain menggunakan format warna 6 digit, CSS juga mendukung penulisan 3 digit.
Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB
merupakan penulisan singkat dari #RRGGBB, #F0F adalah singkatan dari #FF00FF,
#09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).
Penulisan Desimal
Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna menggunakan

angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%,
100%), dimana urutan warna adalah merah, hijau, dan biru. Menggunakan format
pertama, 255 sama dengan 100%. Jika kita menuliskan nilai diluar dari angka yang
seharusnya, yakni 0 – 255 atau 0% – 100% maka CSS secara otomatis akan
menyamakannya dengan nilai yang terdekat. Format penulisan warna seperti ini tidak
terlalu sering digunakan.
Kata Warna (Keyword)
Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata
warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata
ini berasal dari warna dasar VGA pada Windows. Berikut tabel lengkap kata warna
CSS:
Tabel Kata Warna dalam CSS
Keyword Warna Nilai RGB

aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
maroon #800000
navy #000080
olive #808000

orange #ffa500
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
white #ffffff
yellow #ffff00
Nilai property: Transparent
Pada kasus tertentu, kita ingin sebuag tag dalam CSS menjadi transparan, untuk
keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan
memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag
dibelakangnya.
Sebagai contoh penggunaan kode warna diatas, akan ditampilkan dalam file
warna.html sebagai berikut:

Seperti yang terlihat dari kode HTML di atas, setiap kalimat diset menggunakan kode
warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan
kepada selector class=”lima” menjadi tidak terlihat, dan hanya terlihat jika di blok.
Selain kode warna, property dari CSS dapat bernilai seperti pixel, point, maupun
persen.
Mengenal Satuan Nilai (Value) dalam CSS
Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas
dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah
box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS
menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.
Dalam bagian ini kita akan membahas pengertian dan perbedaan masing-masing nilai
tersebut.
Sebuah nilai dalam CSS dapat bernilai positif maupun negatif, bisa berupa angka bulat,
maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna
yang hanya bisa bernilai 0-255 atau 0 sampai dengan FF.
Nilai Absolut
Nilai absolut adalah sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi
kondisi tag induknya (parent), dan didasarkan pada ukuran sebenarnya di media
printing. Di dalam CSS, nilai absolut ini adalah: milimeter (mm), centimeter (cm),
inchi (in), point (pt), dan pica (pc).
Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar
dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar
25,4 mm.
Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word
dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font

normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam
CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.
Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. contoh
penulisannya dalam CSS adalah p {font-size: 1.5pc;}.
Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi
dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor
bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam
mendesain kode CSS yang “pas”.
Nilai Relatif
Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag
disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah:
pixel (px), Em-height (em), dan X-height (ex).
Ukuran pixel (px), merupakan ukuran yang paling sering digunakan dalam CSS. Di
dalam CSS, pixel termasuk nilai relatif karena ia tidak terikat dengan perbandingan
media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau
1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1
pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.
1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut.
Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em>
yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran
1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut
akan berukuran 1,2 kali lebih besar dari ukuran tag p.
Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x”
(huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini,
sehingga browser kadang kala menyamakan 1ex dengan 0,5em.
Nilai Persentasi
Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif
terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS
sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em>
didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau
sekitar 12pt.
Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu
saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka
secara langsung tag <em> akan menyesuaikan tampilannya.
Berikut adalah contoh perbandingan_fontsize.html, dimana akan ditampilkan ukuran

property font-size dengn berbagai value:

Jika diperhatikan lagi, kita akan membuat sebuah selector body {font-size:14pt;} pada
bagian awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke
seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing tag
<p>, ditambahkan property HTML “class”, sehingga ukuran font akan ditimpa
(override) oleh nilai lainnya.
Khusus untuk class=lima, class=enam, dan class=tujuh, digunakan nilai relatif em,
ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body
{font-size:14pt;}. Cobalah mengubah ukuran font-size pada body ini, lalu jalankan
kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut
juga akan berubah ukurannya.

BAB XII
TIPOGRAFI DAN WARNA
Tipografi
Tipografi berasal dari bahasa Latin yaitu dari kata typos artinya cetakan, bentuk
dan sejenisnya dan graphia yang artinya hal tentang seni tulisan (Scheder, 1993).
Ada juga yang menyebutkan sebagai lambang bunyi atau aksara. Huruf
merupakan gambar bunyi bahasa atau biasa disebut dengan aksara
(Poerwadarminta, 1993).Tipografi merupakan salah satu bahasan dalam bidang desain
grafis yang berfokus pada teknik dan seni membuat teks menjadi dapat dicerna dengan
mudah. Perancangan teks pada tipografi dilakukan melalui typesetting, yaitu
pengaturan komposisi huruf dan teks. Komposisi pada typesetting mencakup jenis huruf
yang digunakan, ukuran huruf, panjang baris, jarak antar baris, jarak antar kata, dan
jarak antar huruf. Bagian ini akan membahas bagaimana tipografi diaplikasikan pada
dokumen web, beserta dengan teknik-teknik yang membantu kita dalam merealisasikan
aplikasi tipografi tersebut.
Dasar Tipografi
Sebelum membahas bagaimana teknik aplikasi tipografi pada dokumen web, kita
terlebih dahulu akan melihat berbagai hal-hal mendasar yang harus dimengerti oleh
mahasiswa mengenai tipografi.
Prinsip Utama Tipografi
Sebagai salah satu pembahasan dalam ilmu desain, tipografi memiliki prinsip yang
sama dengan berbagai ilmu desain lainnya: membuat sesuatu menjadi beguna, dan
mudah digunakan. Dalam konteks tipografi, tentunya hal ini diaplikasikan ke teks.
Fungsi utama dari tipografi ialah membuat teks menjadi berguna dan mudah digunakan.
Artinya? Tipografi berbicara tentang kemudahan membaca teks (readability) dan
kemudahan mengenali setiap huruf dan kata (legibility).
Tipografi menghidupkan teks dalam sebuah tulisan. Tipografi membuat teks menjadi
menarik, sehingga pembaca penasaran dan ingin membaca teks. Tipografi memenjara
pembaca dalam teks: sekali pembaca mulai membaca, berhenti membaca dan
melakukan hal lain akan menjadi sulit. Tipografi diciptakan untuk menghargai konten
(teks) dengan memaksimalkan penampilan koten tersebut, dan tipografi diciptakan
untuk memanjakan pembaca dengan memberikan pengalaman yang menarik dalam
membaca teks.
Respect the text, respect the reader, respect the type.
—Allan Haley
Kutipan dari Allan Haley di atas merupakan prinsip utama dari tipografi. Penghargaan
terhadap teks, pembaca, dan font (jenis huruf) merupakan hal yang harus dipraktekkan
oleh setiap desainer.

Typeface
Typeface merupakan karakter-karakter yang dirancang secara khusus untuk digunakan

bersama-sama. Sebagai karakter yang dirancang untuk digunakan bersama-sama,
tentunya sebuah typeface memiliki kesamaan fitur-fitur desain. Yang dimaksud dengan
fitur-fitur desain ialah ciri-ciri visual dari karakter-karakter yang ada di dalam typeface.
Untuk mendapatkan kesamaan fitur, beberapa bagian dari sebuah karakter sering kali
akan ditemukan pada karakter lain dalam sebuah typeface yang sama.
Contoh Kesamaan Fitur pada Huruf
Adapun beberapa contoh dari typeface yang umum ditemukan yaitu: “Times New
Roman”, “Arial”, “Helvetica”, “Courier New”, dan “Calibri”. Perlu diperhatikan juga bahwa
sebuah typeface juga mencakup ketebalan, kemiringan, lebar, dan pembuat dari
typeface tersebut. Hal ini menyebabkan “Helvetica” dan “Helvetica Bold” merupakan
dua typeface yang berbeda, yang juga berbeda dengan “Adobe Helvetica” atau “ITC
Helvetica”.
Pemilihan typeface pada sebuah teks akan sangat berpengaruh terhadap mood
pembaca ketika membaca atau melihat teks tersebut. Perhatikan gambar di bawah:

Pemilihan Typeface dan mood Pembaca
Sebagai teks yang memberikan peringatan, tentunya kita dapat melihat bagaimana teks
yang berada di bagian atas lebih tidak terkesan “mengancam” dibandingkan teks yang
berada di bawah. Jadi ingat, pemilihan typeface yang tepat untuk dokumen web yang
anda rancang akan sangat penting dalam membangun mood pembaca. Ingat, respect
the text, respect the reader, respect the type!
Font
Istilah typeface dan font seringkali dipertukarkan, dan menyebabkan kebinbungan

kepada orang awam, padahal dalam dunia desain kedua hal ini memiliki arti yang
sangat berbeda. Jika typeface bericara tentang karakter yang dirancang untuk
digunakan bersama-sama, font (dalam konteks tipografi web dan tipografi digital)
berbicara mengenai file yang menyimpan typeface.
Untuk mempermudah, bandingkan typeface dan font dengan lagu dan MP3. Sebuah
lagu merupakan karya seniman yang dapat dinikmati dan diinterpretasikan pada
medium apapun, sementara sebuah MP3 merupakan salah satu medium yang
digunakan untuk memainkan lagu. Hal ini sama dengan typeface, yang adalah
merupakan karya seorang seniman (type designer) yang dapat diinterpretasikan secara
bebas, sementara font hanyalah medium yang digunakan oleh komputer untuk
menampilkan typeface.
Sebuah font dapat terdiri dari banyak typeface. Misalnya, font “Helvetica Nueue” dapat
saja memiliki typeface “Hevetica Nueue”, “Helvetica Nueue Bold”, ”, “Helvetica Nueue
Italic”, “Helvetica Nueue Condensed”, dst.
Klasifikasi Huruf
Seperti yang telah dijelaskan sebelumnya, pemilihan huruf akan sangat berpengaruh
terhadap mood dari pembaca ketika membaca teks. Terdapat sangat banyak jenis huruf
yang dapat dipilih untuk menyampaikan pesan, dan pada umumnya setiap huruf
memiliki kepribadian dan pengaruh yang berbeda-beda. Pengetahuan akan seluruh
jenis huruf beserta dengan kepribadiannya tidak mungkin dapat dipelajari oleh hanya
satu orang, tetapi kita dapat mengklasifikasikan sebuah huruf untuk mengambil
kepribadian umum yang dimiliki huruf tersebut.
Dalam dunia web, terdapat lima klasifikasi huruf yang dapat dicetak oleh browser, yaitu:

Serif
Huruf yang memiliki tanda dekoratif pada ujung dari setiap huruf. Tanda dekoratif
tersebut dikenal dengan nama “Serif”. Jenis huruf ini umum digunakan pada
bagian heading dari dokumen.
Sans-serif
Huruf yang tidak memiliki serif. Jenis huruf ini biasanya digunakan untuk konten
utama dari teks.
Serif vs Sans-Serif (Tanda Merah = Serif)
Monospace
Pada jenis huruf ini, setiap huruf memiliki ukuran lebar yang sama, sehingga
huruf dapat disusun dengan rapi (sama panjang dan lebar). Biasanya huruf jenis
ini digunakan untuk kode program.
Cursive
Jenis huruf ini memodelkan cursive, yaitu tulisan tangan manusia. Biasanya
digunakan hanya sebagai dekorasi untuk memperindah bagian tertentu dari
dokumen (misal: kutipan). Huruf jenis ini jarang digunakan untuk seluruh teks.
Fantasy
Huruf yang mengandung simbol atau berbagai jenis dekorasi pada setiap
karakter. Misalnya, huruf “a” dapat saja berbentuk kelinci. Huruf ini biasanya
digunakan sama seperti cursive, untuk memperindah bagian tertentu dari
dokumen.
Berikut adalah contoh kelima jenis klasifikasi huruf yang ada pada web:

Kelima Jenis Huruf pada Web
Selain menggunakan kelima jenis huruf yang disediakan browser, tentunya kita juga
dapat menambahkan sendiri huruf lain yang ingin kita gunakan.
Sistem Pengukuran Huruf
Sistem pengukuran merupakan sebuah hal yang sangat mendasar dalam perancangan
apapun. Dalam merancang sebuah bangunan misalnya, seorang arsitek harus
mengetahui dengan baik sistem pengukuran yang digunakan agar rancangan
bangunan yang dibuatnya dapat dibangun dengan benar oleh kontraktor. Sama halnya
dengan arsitek, dalam merancang teks untuk dokumen web, kita harus mengetahui
bagaimana browser melakukan pengukuran font untuk mendapatkan hasil yang
optimal.
Pengukuran teks untuk web dilakukan dengan menggunakan empat satuan, yaitu:
Ems (em)
Unit pengukuran em merupakan unit pengukuran skala, yang meningkat atau
menurun relatif terhadap ukuran teks dasar. Misalnya, jika ukuran teks dasar dari
sebuah dokumen web adalah 12pt, maka 1em dihitung sebagai 12pt. Dengan
logika yang sama, 2em adalah 24pt, dan 0.5em adalah 6pt. Pengukuran dengan
menggunakan em sangat populer karena skalabilitas ini, yang menyebabkan kita
dapat dengan mudah mengubah pengukuran untuk seluruh elemen yang ada
hanya dengan mengubah ukuran teks dasar.
Pixels (px)
Pixel merupakan unit pengukuran berukuran tetap, yang digunakan pada layar
komputer. Satu pixel merupakan satu titik pada layar komputer. Unit pengukuran
ini biasanya digunakan untuk menghasilkan dokumen yang mementingkan
pengukuran tepat (seperti presentasi), tetapi jarang digunakan karena sulit
diubah ukurannya. Pengubahan ukuran pixel penting untuk skalabilitas, sehingga
misalnya satu kode dapat digunakan untuk tampilan pada desktop dan mobile
(handphone).
Points (pt)

Merupakan unit pengukuran yang digunakan pada percetakan tradisional. 1pt

sama dengan 1/72 inch. Seperti pixel, unit pengukuran ini tidak fleksibel,
sehingga umumnya hanya digunakan untuk dokumen web yang akan dicetak.
Percents (%)
Seperti em, percent merupakan unit pengukuran skala yang ukurannya berubah
sesuai dengan ukuran teks dasar. Perbedaan dengan em ialah, jika 1em sama
dengan ukuran teks dasar, pada percent yang merupakan ukuran teks dasar
ialah 100%.
Perlu diingat bahwa keempat unit pengukuran di atas digunakan untuk mengubah
ukuran teks pada CSS, dan memiliki arti yang berbeda jika digunakan pada konteks
pecetakan tradisional. Keempat unit ini nantinya akan digunakan sebagai unit ukuran
pada properti font-size dari CSS.
Jarak Antar Baris
Sebuah teks yang panjang akan memiliki beberapa baris. Jarak antar baris sangat
penting untuk memastikan pembaca mendapatkan pengalaman membaca yang
maksimal. Jarak antar baris yang terlalu dekat akan menyebabkan teks sulit atau
bahkan tidak dapat dibaca. Di sisi lain, jarak antar baris yang terlalu jauh akan
menyebabkan teks terasa aneh untuk dibaca.

Contoh Perbedaan Jarak Antar Baris
Gambar diatas memperlihatkan bagaimana teks dengan jarak antar baris yang berbeda
akan mempengaruhi kemudahan membaca. Teks pada paragraf pertama tidak memiliki
jarak antar baris, sementara paragraf kedua memiliki jarak antar baris sebesar 0.5em,
dan paragraf ketiga memiliki jarak antar baris sebesar 1.5em. Manakah teks yang lebih
mudah dibaca?
Penentuan jarak antar baris seperti yang diperlihatkan pada gambar di atas dilakukan
dengan menghitung nilai leading, istilah tipografi untuk jarak antar baris, pada
percetakan tradisional. Gambar di bawah memperlihatkan contoh area font dan leading:

Ukuran Font dan Leading
Perhitungan jarak antar baris pada dokumen web dilakukan dengan cara yang berbeda.
Untuk mendapatkan jarak antar baris, kita harus memberikan ukuran tinggi baris
kepada browser. Tinggi baris dihitung dengan menambahkan setengah jarak antar baris
pada atas dan bawah font, seperti yang ditunjukkan pada gambar berikut:
Perhitungan Jarak Antar Baris pada Browser
Seperti namanya, pengaturan jarak antar baris pada dokumen web dilakukan dengan
menggunakan properti line-height.

Jarak Antar Kata dan Huruf
Selain jarak antar baris, faktor lain yang mempengaruhi kemudahan pembacaan
sebuah teks ialah jarak antar kata dan karakter. Idealnya, setiap paragraf dan baris
memiliki jarak antar kata dan karakter yang dibuat khusus untuk memaksimalkan
kemudahan pembacaan teks. Gambar dibawah menunjukkan perbandingan teks
dengan jarak antar kata standar, rendah, dan tinggi.
Contoh Jarak Antar Kata Standar, Tinggi, dan Rendah
Seperti yang dapat dilihat, jarak antar kata yang terlalu rendah akan menyebabkan
pembaca sulit membedakan antara satu kata dengan kata lainnya, sementara jarak
antar kata yang terlalu tinggi akan menyebabkan kesulitan pembacaan karena secara
otomatis mata kita akan mengikuti alur ruang kosong yang terbuka. Alur ini dikenal
dengan istilah river.
River
River seringkali ditemukan ketika kita menggunakan rata kiri dan kanan (justified) pada
teks paragraf. Penambahan dan pengurangan jarak antar kata utamanya dilakukan
untuk mengurangi river, agar pembaca dapat membaca dengan lebih nyaman.

Sayangnya, CSS belum memiliki properti yang mampu mengatur jarak antar kata
dengan sempurna (kata per kata atau baris per baris). Properti untuk perubahan jarak
antar kata, word-spacing, hanya dapat mengubah jarak antar kata secara keseluruhan.
Jarak antar huruf, seperti jarak antar kata memiliki kegunaan yang kurang lebih sama.
Bedanya hanya pada pengontrolan jarak. Sesuai dengan namanya, jarak antar kata
mengatur jarak di antara dua kata, sementara jarak antar huruf mengatur jarak antara
setiap huruf yang ada di dalam teks.
Contoh Jarak Antar Huruf Standar, Tinggi, dan Rendah
Seperti yang dapat dilihat, jarak antar huruf yang terlalu tinggi akan menghasilkan
banyak river, sementara jarak antar huruf yang rendah akan menyebabkan kesulitan
dalam membaca kata.
Properti CSS untuk Tipografi
Bagian ini akan membahas berbagai properti CSS yang dapat digunakan untuk
mengontrol berbagai aspek tipografi dari dokumen web.
Warna Teks
Salah satu hal pertama yang umumnya dilakukan oleh seorang desainer atau
pengembang yang ingin memperindah web yang dikembangkan ialah dengan
mengubah warna dan typeface dari teks. Tentu saja terdapat banyak properti lain yang
dapat digunakan, tetapi penrubahan typeface dan warna merupakan salah satu
perubahan yang memiliki dampak cukup besar pada dokumen, dengan hanya sedikit

usaha. Mengganti warna dan jenis tulisan milik browser secara otomatis akan membuat
halaman menjadi lebih unik.
Perubahan warna teks dapat dilakukan dengan mudah: menggunakan properti color dari
CSS. Properti ini menerima hanya satu nilai saja, tetapi nilai yang diterima dapat
diberikan dalam berbagai format. Kita dapat memberikan kata kunci, nilai heksadesimal,
RGB, RGBa, HSL, dan HSLa ke properti ini. Begitupun, properti yang paling populer
digunakan hanya ada dua, aitu nilai heksadesimal dan nilai RGBa. Nilai heksadesimal
digunakan karena kemudahan dan interoperabilitas nilai ini (program pengolah grafis
biasanya menggunakan nilai ini), sementara nilai RGBa populer karena dukungan
transparansi dari CSS3.
Kode di bawah memberikan contoh penggunaan properti color dari CSS:

/*
Warna dengan kata kunci
*/
p {
color: blue;
}
/*
Warna dengan kata nilai heksadesimal
*/
p {
color: #0000FF;
/* Penulisan singkat */
color: #00F;
}
/*
Warna dengan nilai RGB
Sintaks: rgb(merah, hijau, biru)
*/
p {
color: rgb(0, 0, 255);
}
/*
Warna dengan nilai RGBa
Sintaks: rgba(merah, hijau, biru, transparansi)
*/
p {
color: rgba(0, 0, 255, 1);
}
/*
Warna dengan nilai HSL
Sintaks: hsl(warna, kejenuhan, intensitas-cahaya)
*/
p {
color: hsl(202, 100%, 50%);
}
/*
Warna dengan nilai HSLa
Sintaks: hsl(warna, kejenuhan, intensitas-cahaya, transparansi)
*/
p {
color: hsla(202, 100%, 50%, 1);
}
Jika ingin melihat efek tiap warna dengan jelas, anda dapat bereksperimen secara
langsung dengan kode yang dibuat di atas. Nilai warna sendiri disarankan diambil
langsung dari program pengolah grafis seperti Photoshop untuk menghemat waktu
dalam pengembangan. Program pengolah grafis umumnya memiliki fitur untuk konversi
warna ke berbagai format.

Font Properties
CSS memberikan banyak properti untuk mengubah tampilan teks dari sebuah dokumen
web. Properti-properti yang ada dibagi ke dalam dua kateogri besar, yaitu properti
berbasis font dan properti berbasis teks. Mayoritas properti ini diawali dengan nama
kategorinya, sehingga kebanyakan properti yang ada nantinya akan memiliki format font-
* ataupun text-*. Pembahasan akan dimulai dengan properti font.
Font Family
Properti font-family merupakan properti yang menentukan font yang digunakan untuk
menampilkan teks. Properti ini dapat berisi beberapa nilai, sehingga kita memiliki font
pengganti yang dapat dipilih oleh sistem jika sistem pengguna tidak memiliki font utama
yang diingnkan. Font yang paling pertama kali diberikan (berada di paling kiri)
merupakan font utama yang akan digunakan jika sistem pengguna memiliki font
tersebut. Jika tidak, browser akan terus mencari pada daftar font di properti font-family,
terus sampai pada akhir di mana browser akan menggunakan font standar sesuai
dengan jenis font yang ditentukan. Font yang memiliki nama lebih dari satu kata harus
diapit dengan tanda petik.
Berikut adalah contoh kode penggunaan font-family:
h1 {
font-family: Georgia, "Times New Roman", "Book Antiqua", serif;
}
Font Size
Properti font-size memberikan kemampuan untuk mengubah ukuran teks dengan

menggunakan sistem pengukuran huruf. Berikut adalah contoh penggunaan properti ini:
a {
font-size: 12px;
}
p {
font-size: 10pt;
}
h1 {
font-size: 1.25em;
}
h2 {
font-size: 110%;
}
Font Style
Untuk memberikan cetak miring terhadap teks, kita dapat menggunakan properti font-
style. Properti ini menerima empat nilai standar, yaitu normal, italic, oblique, dan inherit.

Perbedaan antara italic dan oblique biasanya tergantung kepada font yang dipilih, karena
tidak setiap font memiliki typeface jenis ini. Nilai yang paling sering digunakan ialah
normal dan italic.
Berikut adalah contoh penggunaan properti font-style:
strong {
font-style: italic;
}
Font Variant
Properti font-variant digunakan untuk memberikan tampilan small caps, yaitu seluruh teks
ditulis dengan huruf kapital yang berbeda ukuran. Huruf kapital ukuran standar
digunakan pada tempat yang memang merupakan huruf kapital, sementara huruf
standar (kecil) menggunakan model huruf kapital yang diperkecil. Untuk lebih jelasnya,
coba lakukan eksperimen dengan browser pada properti ini.
Properti font-variant menerima tiga buah nilai, yaitu small-caps, normal, dan inherit. Berikut
adalah contoh penggunaan properti font-variant:
h1 {
font-variant: small-caps;
}
Perlu diingat juga bahwa sama dengan penggunaan nilai oblique pada font-style, nilai
small-caps bergantung kepada dukungan dari font yang digunakan. Untuk mendapatkan
efek maksimal, pastikan font yang digunakan memang memiliki typeface jenis small
caps.
Font Weight
Terkadang kita perlu mengubah ketebalan dari sebuah teks pada bagian tertentu dari
sebuah dokumen, misalnya untuk memberikan penekanan teks, atau menarik perhatian
pembaca pada singkatan. Untuk kasus seperti ini kita dapat menggunakan properti font-
weight. Properti ini dapat diisikan dengan nilai kata kunci khusus seperti normal, bold,
bolder, lighter, dan inherit. Yang paling sering ditemui ialah penggunaan nilai normal dan
bold untuk mengubah teks dari standar menjadi cetak tebal, atau sebaliknya.
Selain menggunakan kata kunci, kita juga dapat mengisikan properti ini dengan nilai
angka, yaitu dengan angka 100, 200, 300, 400, 500, 600, 700, 800, dan 900. Nilai-nilai angka
ini merepresentasikan tingkat ketebalan teks, mulai dari paling tipis (100) sampai yang
paling tebal (900). Nilai angka pada teks normal ialah 400, dan nilai bold ialah 700.
Sebelum menggunakan nilai angka ini, pastikan typeface yang digunakan mendukung
ketebalan tersebut, karena jika tidak maka pengisian nilai tidak akan memberikan efek.
Berikut ialah contoh penggunaan properti font-weight:

h1 {
font-weight: bold;
}
em {
font-weight: 700;
}
Line Height
Seperti yang telah dijelaskan sebelumnya tentang jarak antar baris, properti ini
digunakan terutama untuk mengubah jarak antar baris dari sebuah teks. Nilai yang
dapat diisikan pada bagian ini sama dengan font-size, yaitu nilai sistem pengukuran
huruf.
Berikut ialah contoh penggunaan properti line-height:
p {
line-height: 24px;
}
Penulisan Singkat Properti Font
Seluruh properti font yang diberikan pada bagian-bagian sebelumnya dapat

dikombinasikan dan dituliskan dalam hanya satu properti font. Jika ingin menyingkat
penulisan, kita harus memberikan urutan properti yang tepat, yaitu: font-style, font-variant,
font-weight, font-size, line-height, dan font-family. Seluruh nilai-nilai yang akan diisikan
tersebut harus dipisahkan dengan spasi (" "), kecuali utnuk font-size dan line-height.
Properti font-size dan line-height dipisahkan dengan slash (/).
Perlu diingat juga bahwa nilai-nilai dari properti yang diisikan pada penulisan singkat
bersifat opsional (boleh tidak diisi), kecuali untuk font-size dan font-family. Karena hal ini
pula, yang paling sering dijumpai pada penggunaan penulisan singkat ialah hanya font-
size dan font-family.
Kode berikut memberikan contoh penulisan singkat properti font:
p {
font: italic small-caps bold 13px/20px 'Helvetica Neue',
Arial, Helvetica, sans-serif;
}
Text Properties
Mengetahui cara untuk mengatur pilihan font dan berbagai propertinya tentu saja tidak
cukup untuk menghasilkan tipografi dokumen web yang maksimal. Selain mengubah
berbagai properti font, kita juga dapat mengatur berbagai hal yang berhubungan
dengan teks.

Text Align
Melakukan pelurusan (align) teks merupakan bagian penting untuk mendapatkan ritme
dan alur pembacaan sebuah dokumen. Selain itu, kita juga dapat memperbaiki
permasalahan seperti river dengan memiliki pelurusan teks yang benar.
Pelurusan teks pada CSS diatur dengan menggunakan properti text-align, yang dapat
diisikan dengan lima nilai, yaitu: left, right, center, justify, and inherit. Seluruh nilai tersebut
sama artinya dengan nilai pelurusan teks pada program pengolah kata seperti Microsoft
Word, sehingga penjelasan lebih lanjut tidak akan dilakukan lagi.
Berikut adalah contoh penggunaan properti text-align:
p {
text-align: justify;
}
Text Decoration
Properti text-decoration memberikan kemampuan untuk menghias teks, yang dapat

diisikan dengan nilai-nilai berikut: none, underline, overline, line-through, blink, and inherit.
Mayoritas penggunaan properti ini dilakukan untuk menghilangkan garis bawah pada
teks dari link, tetapi tentunya kita dapat menggunakan text-decoration untuk berbagai
keperluan lain.
Kegunaan tiap-tiap properti sendiri sama seperti namanya: overline memberikan teks
garis di atas tulisan, underline memberikan garis di bawah tulisan, line-through membuat
teks dicoret, dan blink membuat teks berkedip. Dari seluruh properti, yang tidak
disarankan untuk digunakan ialah blink, karena properti ini membuat pengguna sulit
membaca teks.
Nilai line-through sendiri dapat digunakan untuk menandakan teks yang akan dihapus
dari sebuah dokumen (semantik: tag del) atau teks yang telah tidak relevan atau akurat
(semantik: tag s).
Berikut adalah contoh penggunaan properti text-decoration:
h1 {
text-decoration: underline;
}
Text Indent
Properti text-indent dapat digunakan untuk memberikan indentasi terhadap teks, seperti
yang sering tampak pada tulisan di buku. Properti ini dapat digunakan untuk
memberikan indentasi ke dalam (nilai positif) maupun ke luar (nilai negatif), dan dapat
diisikan dengan nilai-nilai pada sistem pengukuran huruf.
Berikut adalah contoh kode penggunaan properti text-indent:

p {
text-indent: 72pt;
}
Text Shadow
Properti text-shadow, seperti namanya, memungkinkan kita menambahkan bayangan,

atau beberapa bayangan, ke teks. Properti ini harus diisikan dengan empat nilai secara
terurut dari kiri ke kanan. Adapun nilai-nilai yang harus diisikan ialah sebagai berikut:
1. Jarak bayangan pada sumbu x, diisikan dengan satuan sistem pengukuran huruf kecuali
%,
2. Jarak bayangan pada sumbu y, diisikan dengan satuan sistem pengukuran huruf kecuali
%,
3. Tingkat pengaburan bayangan, diisikan dengan satuan sistem pengukuran huruf
kecuali %, dan
4. Warna dari bayangan, diisikan dengan nilai warna pada CSS.
Properti ini juga dapat diisikan dengan beberapa nilai, agar teks yang diaplikasikan
dapat memiliki beberapa bayangan. Jika ingin mengisikan beberapa nilai, pisahkan
setiap nilai bayangan dengan tanda koma (,).
Berikut adalah contoh kode dari properti text-shadow:
h1 {
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
/*
Banyak Bayangan
*/
h2 {
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1),
1em 1em 2em rgba(125, 255, 255, 1);
}
Text Transform
Properti text-transform sama dengan properti font-variant, dalam hal properti ini
memberikan perubahan huruf (kapital ke standar atau sebaliknya) terhadap teks yang
ditampilkan. Jika font-variant mencari typeface huruf kapital kecil, maka text-transform
menggunakan typeface yang umum ada untuk mengubah teks.
Nilai yang mungkin diisikan dengan properti ini yaitu: none, capitalize, uppercase, lowercase,
and inherit. Nilai uppercase dan lowercase sudah jelas kegunaannya, sementara nilai
capitalize digunakan agar seluruh awal kata dari teks dibuat menjadi huruf kapital. Nilai
none akan menyebabkan teks ditampilkan sebagaimana ia diketikkan.
Berikut adalah contoh penggunaan properti text-transform:

a.sponsor {
text-transform: capitalize;
Letter Spacing dan Word Spacing
Properti letter-spacing dan word-spacing digunakan untuk mengatur jarak antar huruf dan
jarak antar kata. Nilai yang diterima ialah unit pada sistem pengukuran huruf.
Kode di bawah memberikan contoh penggunaan kedua properti ini:
p {
letter-spacing: 0.7em;
word-spacing: 0.9em;
}
Web Safe Font
Ketika kita memilih font untuk digunakan dalam dokumen web, browser akan mencari
font yang disebutkan dari sistem operasi terlebih dahulu. Jika font tidak ditemukan,
browser akan secara otomatis menggunakan font yang standar, antara serif atau sans-
serif.
Untungnya, ada beberapa jenis font yang hampir selalu ada pada komputer, tablet,
handphone, ataupun berbagai perangkat yang dapat melakukan browsing. Beberapa
font yang selalu ada ini hampir dapat selalu digunakan oleh desainer, karena
kemungkinan besar perangkat yang membuka akan dapat menampilkan font dengan
benar. Karena keamanan yang ditawarkan, font jenis ini dikenal dengan nama “Web
Safe Font”.
Adapun beberapa contoh dari web safe font ialah sebagai berikut:
 Arial
 Courier New
 Courier
 Garamond
 Georgia
 Lucida Sans
 Lucida Grande
 Lucida
 Palatino
 Linotype
 Tahoma
 Times New Roman
 Times
 Trebuchet
 Verdana
Web Font
Adanya keterbatasan dalam memilih font yang dapat digunakan tentu saja akan
membatasi kreatifitas seorang desainer. Untuk menanggulangi hal ini, browser modern
telah mendukung sebuah properti yang dikenal dengan nama “Web Font”. Properti yang
digunakan ialah @font-face dari CSS. Langsung saja, berikut adalah contoh kode dari
properti @font-face:
@font-face {
font-family: 'Windings';
src: url('windings.eot');
src: url('windings.eot') format('embedded-opentype'),
url('windings.woff') format('woff'),
url('windings.ttf') format('truetype'),
url('windings.svg') format('svg');
}
body {
font-family: 'Windings', 'Helvetica Neue', Arial, Helvetica,
sans-serif;
}
Seperti yang dapat dilihat pada kode di atas, pengunaan properti @font-face sangatlah
sederhana dan langsung: spesifikasikan font-family, kemudian rujuk ke URL tempat kita
menyimpan font tersebut, dan panggil pada elemen lain.
2. Warna
Warna adalah kualitas dari mutu cahaya yang dipantulkan suatu obyek ke mata
manusia. Warna menurut ilmu fisika adalah sifat cahaya yang bergantung dari panjang
gelombang yang dipantulkan oleh suatu benda. Warna utama yang ditimbulkan
adalah merah, kuning dan biru. Benda yang memantulkan suatu gelombang cahaya
tertentu akan berwarna seperti cahaya yang dipantulkannya. Dalam ruang yang
tidak ada cahaya, semua benda terlihat hitam karena tidak ada cahaya yang datang
dan dipantulkan. Warna dapat dilihat sebagai warna inti yang terdiri dari: merah;
kuning; biru, sedangkan warna campuran terdiri dari: jingga; hijau; nila; ungu. Sedangan
pandangan lain tentang warna dapat dilihat dengan: warna primer adalah warna
dasar yang dapat dipakai untuk membentuk warna lain, misalnya merah, biru dan
hijau; warna sekunder adalah warna campuran dari dua warna primer, misalnya
kuning, sian dan magenta (Sadjiman, 2005)
Warna menurut ilmu bahan adalah sembarang zat/pigmen tertentu yang

memberikan warna pada benda-benda di sekitar kita. pigmen warna dapat
dihasilkan secara alami dari alam dan dibuat dari bahan kimia yang disebut dengan
warna sintetis.
JENIS WARNA
Tanpa cahaya, warna tidak akan ada. Warna merupakan getaran atau gelombang yang
diterima oleh indera penglihatan kita.Secara Obyektif (fisik) warna adalah sifat cahaya
yang dipancarkan. Sedangkan secara subyektif (psikologis) warna adalah bagian dari
pengalaman indera penglihatan.

Menurut kejadiannya, warna dibagi menjadi dua:
1. Warna Additive
Warna yang berasal dari cahaya (spectrum). Warna pokok dari warna additive
adalah Merah (Red), Hijau (Green), dan Biru (Blue), atau dalam komputer
disebut warna model RGB. Pencampuran warna cahaya (spectrum)
 Cahaya Biru (Blue) + Cahaya Merah (Red) = Cahaya Magenta
 Cahaya Merah (Red) +Cahaya Hijau (Green) = Cahaya Kuning (Yellow)
 Cahaya Hijau (Green) + Cahaya Biru (Blue) = Cahaya Sian (Cyan)
 Cahaya Biru (Blue) + Cahaya Merah (Red) + Cahaya Hijau (Green) = Putih
Jernih (Bening)
2. Warna Subtractive
Warna yang berasal dari bahan (pigmen). Warna pokok dari warna subtractive
adalah Sian (Cyan), Magenta, dan Kuning (Yellow), atau dalam Komputer
disebut sebagai warna CMY. Pencampuran warna bahan (pigmen)
 Kuning (Yellow) + Sian (Cyan) = Hijau (Green)
 Magenta + Kuning (Yellow) = Jingga Merah (Orange)
 Sian (Cyan) + Magenta = Ungu Biru (Violet)
 Kuning (Yellow) + Magenta + Sian (Cyan) = Warna Gelap (Black)
DIMENSI WARNA
Terdapat tiga dimensi warna yang sangat besar pengaruhnya terhadap Desain Grafis,
yaitu:
1. Hue
Adalah: rona warna atau corak warna yang mempunyai karakteristik atau ciri
khas yang digunakan untuk membedakan warna satu dengan yang lain misalnya
merah, kuning, hijau, dan lain-lainnya.
Di dalam HUE terdapat klasifikasi warna yaitu warna primer, sekunder,

intermediate, tersier, dan warna kuarter.
Warna Primer
Adalah warna pertama atau warna pokok. Disebut warna utama karena warna
tersebut tidak dapat dibentuk dari warna lain. Disebut warna pokok karena warna
tersebut dapat digunakan sebagai pokok pencampuran untuk memperoleh
warna-warna lain. Nama-nama warna primer, yaitu:
 Biru, nama warna sebenarnya adalah sian (Cyan), yaitu biru semu hijau.
 Merah, nama sebenarnya adalah Magenta, yaitu merah semu ungu.

 Kuning, disebut juga sebagai Lemon Yellow dan dalam tinta cetak disebut
Yellow.
Warna Sekunder
Adalah warna kedua, yaitu warna jadian dari percampuran dua warna primer.
Nama-nama warna sekunder, yaitu:
 Jingga (oranye), adalah hasil pencampuran warna merah dan kuning
 Ungu (Violet), adalah hasil pencampuran warna merah dan biru
 Hijau, adalah hasil pencampuran warna kuning dan biru.
Warna Intermediate
Adalah warna perantara, yaitu warna yang ada diantara warna primer dan
sekunder pada lingkaran warna. Nama-nama warna Intermediate, yaitu:
 Kuning Hijau (sejenis Moon Green), yaitu warna yang ada diantara kuning
dan hijau.
 Kuning Jingga (sejenis Deep Yellow), yaitu warna yang ada diantara kuning
dan jingga.
 Merah Jingga (Red / Vermilion), yaitu warna yang ada diantara merah dan
jingga.
 Merah Ungu (Purple), yaitu warna yang ada diantara merah dan ungu/ violet.
 Biru Violet (sejenis Blue/Indigo), yaitu warna yang ada diantara biru dan ungu
/ violet.
 Biru Hijau (sejenis Sea Green), yaitu warna yang ada diantara biru dan hijau.
Warna Tersier
Adalah warna ketiga, yaitu warna hasil percampuran dari dua warna sekunder
atau warna kedua. Nama-nama warna tersier, yaitu:
 Coklat Kuning (disebut juga Siena Mentah, Kuning Tersier, Yellow Ochre,
atau Olive), yaitu percampuran warna jingga dan hijau.
 Coklat Merah (disebut juga Siene Bakar, Merah Tersier, Burnt Siena, atau
Red Brown), yaitu percampuran warna jingga dan ungu.
 Coklat biru (disebut juga Siena Sepia, Biru Tersier, Zaitun, atau Navy Blue),
yaitu percampuran warna hijau dan ungu.
Warna Kuarter
Adalah warna ke empat, yaitu warna hasil percampuran dari dua warna tersier
atau warna ke tiga. Nama-nama warna kuarter adalah:
 Coklat Jingga (Jingga / Oranye Kuarter, atau semacam Brown), yaitu hasil
percampuran kuning tersier dan merah tersier.
 Coklat Hijau (Hijau kuarter, semacam Moss Green), yaitu percampuran biru
tersier dan kuning tersier.
 Coklat Ungu (Ungu / Violet kuarter, atau semacam Deep Purple), yaitu hasil
percampuran merah tersier dan biru tersier.
2. Value
Adalah: dimensi mengenai terang gelap atau tua muda warna, atau disebut juga
dengan istilah ”brightness” atau ke ”terang” an warna.
Pada skala value terlihat sembilan tingkatan gelap ke terang. Tingkatan ke 1, 2,

3, adalah value gelap yang disebut SHADE. Tingkatan 4, 5, 6, adalah value
sedang yang disebut TONE. Tingkatan 7, 8, 9, adalah value terang yang disebut
TINT.
 Value 1 adalah hitam yang kita lihat sehari-hari, 0 merupakan hitam ideal
(hitam yang sama sekali tidak memancarkan cahaya)
 Value 9 adalah putih yang kita lihat sehari-hari, 10 adalah putih ideal (seperti
putih bening sebagai sumber cahaya).
 Value 5 adalah Abu-abu atau value tengah-tengah.
3. Chroma (Intensitas Warna)
Adalah: tingkat kekuatan atau intensitas warna, yaitu kuat lemahnya warna,
cerah redupnya warna, atau murni kotornya warna. (hampir mirip dengan
Saturation / penyerapan warna atau peredaman warna, bedanya Chroma color
adalah pengukuran dari seberapa murni sebuah HUE dalam hubungannya
dengan warna abu-abu; sedangkan Saturation adalah derajat kemurnian dari
sebuah HUE).
KOMBINASI WARNA
1. Warna Akromatik
Adalah warna kombinasi gelap dan terang saja. Asal katanya adalah A=tidak,
Chromatic=Warna. Biasa kita sebut sebagai Grayscale. Kombinasi warna
tersebut berkesan klasik dan artistik, yang banyak dipakai untuk fotografi atau
surat kabar.
2. Monokrom / Netral
Adalah satu warna Hue yang dikombinasikan dengan gelap terang. Disebut juga
monokrom. Kombinasi warna ini sangat sederhana, tidak banyak resiko dan
mudah diterima mata. Kelemahannya kombinasi ini akan membosankan dan
mudah ditinggalkan. Easy come, easy go.
3. Komplementer
Adalah dua warna Hue yang berlawanan, dikombinasikan dengan gelap terang.
Disebut juga warna komplementer. Kombinasi tersebut akan menarik mata (eye
catching), tapi jika anda tidak berhasil menggabungkan 2 warna tersebut, akan
terlihat lepas / tidak matching.

4. Pastel dan Dark Colors

Adalah warna-warna yang mendekati warna terang / putih. Biasa disebut juga
warna Sepia. Kebalikan dari pastel adalah warna-warna gelap disebut juga Dark
Colors.
5. Analog
Adalah warna-warna beda hue yang bersebelahan, sehingga kombinasinya akan
lebih mudah diterima mata dan lebih berani dibanding warna monokrom.
6. Clash
Adalah dua warna yang berlawanan (komplementer), tetapi menyimpang /
bergeser satu hue. Sesuai namanya ’clash’ adalah warna yang tidak harmonis /
bertentangan / tabrakan sehingga kombinasi warna tersebut tidak enak
dipandang. Tapi dengan teknik tertentu, akan di dapat paduan warna yang
inovatif dan khas.
7. Split Komplementer
Lebih rumit dari warna clash, karena terdiri dari tiga warna yang tidak harmonis /
clash. Bila Anda dapat menyatukan 3 warna tersebut dalam sebuah desain, akan
dihasilkan karya inovatif dan spektakuler. Jika gagal menyatukannya akan
menyakitkan mata dan memusingkan kepala.
8. Triangle Primer, Sekunder dan Intermediate
Merupakan perpaduan dari tiga warna senasib. (Primary, Sekunder,
Intermediate). Meskipun 3 warna, kombinasi tersebut cenderung tidak clash.
PSIKOLOGI WARNA
1. Merah
Melambangkan: perjuangan, nafsu, aktif, agresif, dominan, kemauan keras,
persaingan, keberanian, energi, kehangatan, cinta, bahaya.
2. Biru
Melambangkan: ketenangan, kepercayaan, keamanan, teknologi, kebersihan,
keteraturan.
3. Hijau
Melambangkan: alami, sehat, keinginan, keberuntungan, kebanggaan,
kekerasan hati dan berkuasa.
4. Kuning
Melambangkan: optimisme, harapan, tidak jujur, berubah-ubah, gembira, santai.
5. Ungu / Jingga

Melambangkan: spiritual, misteri, kebangsawanan, sombong, kasar, dan

keangkuhan.
6. Oranye
Melambangkan: energi, semangat, segar, keseimbangan, ceria, hangat.
7. Coklat
Melambangkan: tanah/bumi, kenyamanan, daya tahan, suka merebut, tidak suka
memberi hati, kurang toleran, pesimis terhadap kesehjahteraan dan kebahagiaan
masa depan.
8. Abu-abu
Melambangkan: intelek, futuristik, milenium, sedih
9. Putih
Melambangkan: bersih, tepat, tidak bersalah
10. Hitam
Melambangkan: power, jahat, canggih, kematian, misteri, ketakutan, sedih,

anggun.
CARA PEMILIHAN WARNA
1. Sebelum memilih-milih warna, Anda harus mengetahui pembuatan warna,

seperti yang telah dibahas sebelumnya. Anda harus dapat membedakan antara
hue, lightness, saturation juga warna primer, komplementer, monokrom dan
psikologi warna.
2. Mengetahui target / audience yang akan menggunakan karya Anda. Apakah
audience Anda anak balita, remaja, dewasa, atau usia lanjut, laki-laki atau
perempuan. Sehingga Anda tinggal mencocokkan dengan warna dan psikologi
yang diinginkan.
Warna dan Usia:
l Anak-anak (Kontras, Kuat, & Murni)
l Remaja (Panas, Semarak, & Segar)
l Dewasa (Hijau, Segar, Tenang, & Lembut tapi dinamis)
l Orang Tua (Tenang, Sejuk & Lembut)
3. Jika Anda telah memilih warna tertentu, bukan berarti warna lain tidak bisa
dipakai. Yang harus Anda perhatikan jangan sampai warna lain tersebut
mengalahkan kekuatan warna yang Anda pilih.

4. Sebelum mendesain, sebaiknya tentukan dahulu warna latar belakang. Karena

warna background akan dilihat atau dirasakan pertama kali. Warna background
disini bisa berupa blok warna atau gambar monokrom.
5. Keuntungan background gelap yaitu dapat diberi efek cahaya atau flare.
Keuntungan background putih dapat diberi efek bayangan.
6. Sebelum memilih warna yang berbeda jenis / hue, lebih mudah pilih warna
monokrom yang berbeda gelap terang (lightness) atau cerah pudar (tint) nya.
Terlalu banyak perbedaan warna hue, seperti warna pelangi, akan sulit
mengaturnya, dibanding 2 warna tapi dengan variasi gelap terang (lightness).
7. Terlalu banyak warna hue dan lightness akan mengakibatkan kontras yang
berlebihan. Hanya sedikit batas antara kontras dan kacau (chaos).
8. Tentukan atau batasi warna utama hanya 2 atau 3 warna hue saja. Hitam dan
putih jangan dianggap sebagai warna karena fungsinya adalah sebagai cahaya
(lightness).
9. Desain menggunakan 4 warna bisa menguras waktu dan tenaga. Desain
menggunakan 5 warna adalah terlalu sulit, akan memeras pikiran dan resiko
gagalnyapun tinggi.
10. Jika Anda belum berani bereksperimen dengan warna atau ingin belajar menahan
diri, gunakan warna akromatik / grayscale. Hal ini akan menghindari dari
masalah clash atau chaos.
11. Alam adalah contoh yang baik untuk mendapatkan kombinasi warna yang
harmonis. Lihatlah pohon, daun, tanah, dan langit di saat pagi hingga malam.
Karena kita terbiasa dengan alam tersebut, maka mata kita tidak akan
mengatakan ”kacau”. Sehingga tidak ada warna hue yang ”bertabrakan”.
12. Warna yang tidak biasa / tidak natural seperti: cyan, magenta, ungu dapat dipakai
untuk ”mengejutkan” audience. Tetapi jika terlalu banyak kejutan, karya Anda
akan kehilangan informasi yang ingin disampaikan.

Modul Design Web I 2017

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Design Web I 2017

Diunggah oleh

Hak Cipta:

Format Tersedia

Paulus Harsadi S.Kom, M.

Jenis arsitektur sistem terdistribusi antara lain :

World Wide Web

Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya.

Bagaimana Web Bekerja ?

Alur permintaan halaman Web oleh user :

Design Web 1 / STMIK Sinar Nusantara Page 2

Saat ini pemrograman web dibagi menjadi 2 kelompok, yaitu :

Karakteristik client –side scripting :

Karakteristik server side programming :

Keuntungan server side programming :

Design Web 1 / STMIK Sinar Nusantara Page 3

HTML (Hypertext Mark-up Language)

Ciri – ciri dokumen html :

Program Editor Html

Design Web 1 / STMIK Sinar Nusantara Page 4

Struktur Dokumen Html

1. Elemen <HTML> yang menyatakan suatu dokumen HTML

Design Web 1 / STMIK Sinar Nusantara Page 5

 <ISINDEX> memberitahukan browser untuk membuat suatu bentuk pencarian

Design Web 1 / STMIK Sinar Nusantara Page 6

tersebut dituju oleh LINK

 TITLE Seperti tag <TITLE> befungsi sebagai judul

 NAME Merupakan informasi untuk suatu dokumen, bukan sebagai judul

Design Web 1 / STMIK Sinar Nusantara Page 7

<META HTTP-EQUIV=”Expires” CONTENT=”10 Jul 1996”>

WARNA NOMOR HEXADESIMAL

Design Web 1 / STMIK Sinar Nusantara Page 8

Berikut program untuk menentukan warna background suatu dokumen :

Format : <nama tag> teks yang ditampilkan </nama tag>

Design Web 1 / STMIK Sinar Nusantara Page 9

 Nilai merupakan suatu kumpulan dari nilai tertentu ( misalnya dalam

Design Web 1 / STMIK Sinar Nusantara Page 10

dan kalimat yang ada di situ sehingga menjadi seperti ini:

<P>Dalam HTML paragraf dapat diformat dengan menggunakan

<P>Paragraf juga dapat diatur perataannya yaitu rata kiri,

Design Web 1 / STMIK Sinar Nusantara Page 12

Jika ditampilkan akan tampak seperti berikut ini:

<HR WIDTH=450> atau

- NOSHADE, untuk menghilangkan efek tiga dimensi garis.

Design Web 1 / STMIK Sinar Nusantara Page 13

Jika dijalankan akan tampak tampilan sebagai berikut :

 Tag <Hn>, dimana n=1,2,3,4,5,6

Design Web 1 / STMIK Sinar Nusantara Page 14

Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:

Design Web 1 / STMIK Sinar Nusantara Page 15

Tampilan dari kode di atas adalah sebagai berikut :

Design Web 1 / STMIK Sinar Nusantara Page 16

 SIZE, digunakan untuk menentukan ukuran font.

Design Web 1 / STMIK Sinar Nusantara Page 17

Tampilan dari kode-kode di atas adalah :

Design Web 1 / STMIK Sinar Nusantara Page 18

kata-kata ini diantarai satu spasi sedangkan<br>kata-kata

Karakter Keterangan Notasi

Design Web 1 / STMIK Sinar Nusantara Page 19

mengandung satu pokok pikiran. Antara satu <br> paragraf

Design Web 1 / STMIK Sinar Nusantara Page 20

Beginilah tampilannya dalam browser:

 daftar definisi (definition list)

Design Web 1 / STMIK Sinar Nusantara Page 22

Informasi dapat disampaikan dengan mudah jika ditampilkan dengan

Hasil pada tampilan browser :

Design Web 1 / STMIK Sinar Nusantara Page 23

Mengganti jenis nomor pada tag <OL> beserta fungsi-fungsinya :