Modul HTML 3

Biografi Penulis
Virgiawan Listanto, Lahir di Metro, 30 Maret 1993. Menamati

pendidikan formalnya di SMK Negeri 3 Metro jurusan Teknik
Komputer Dan Jaringan pada tahun 2011. Saat ini bekerja sebagai
Web Administrator diperusahaan CV. Merah Putih Networks
Lampung. Berpengalaman dibidang web design sejak tahun 2009
dan sudah membuat berbagai macam karya website seperti Toko
online, web personal, sekolah, lembaga, web company profil,
radio online, dan program aplikasi berbasis website seperti
Helpdesk Request System. Pendiri Miniw0rm University, Miniw0rm CMS, dan Miniw0rm Inc. Selain
itu ia merupakan penulis muda yang telah menelurkan buku IT berjuul Cepat Mahir
Pemrograman Web Dengan PHP dan MySQL terbitan Prestasi Pustaka Raya.
Salah satu karya terbaiknya yang telah diminati banyak programmer tanah air adalah Miniw0rm
CMS. Sebuah Content Management System yang ditulis dengan bahasa pemrograman PHP dan
MySQL, Miniw0rm CMS berlisensi open source, artinya siapa saja boleh memodifikasinya serta
menggunakannya sesuai dengan keinginan masing-masing. Miniw0rm CMS dibuat dengan model
programming for future, artinya semua code yang ditulis dengan teknik pemrograman
prosedural. Hal ini dilakukan supaya para programmer web yang baru terjun ke dunia web design
dapat mengexplorasikan dirinya dengan memodifikasi CMS ini sesuai dengan gaya pemrograman
yang mereka gunakan. Menekuni bahasa pemrograman, bahasa scripting dan bahasa markup
berbasis website seperti: PHP, CSS, X(HTML), Javascript, JQuery, Ajax, XML dan MySQL.
Contact Person
Email: virgikodok@yahoo.co.id
Facebook: http://facebook.com/popay.kodok
Twitter: http://twitter.com/kod0k_
YM: virgi.cute (maaf ID lama jadi agak narsis hehe)
Website: http://miniw0rm.us
Miniw0rm University | Create Your Title Web Master Here
Lesson: 1 Web Design

HTML Fundamental
Oleh:
Virgiawan Listanto
Lisensi Dokumen:
Semua isi yang ada didalam buku ini bebas digunakan, dimodifikasi,
dan disebarkan secara bebas untuk tujuan bukan komersial. Dengan
syarat tidak menghapus atau mengubah attribute penulis dan
copyright Miniw0rm University tanpa sepengetahuan dari penulis.
Daftar Isi
Biografi Penulis
Pendahuluan
BAB I Pengenalan HTML
Apa itu HTML?
Sejarah HTML
Web Browser, Code Editor, Dan WYSIWYG
Perbedaan Ekstensi .htm dan .html?
BAB II Dasar-Dasar HTML
Tag HTML
Struktur Dokumen HTML
Element HTML
Attribut HTML
BAB III HTML Fundamental
HTML Heading
HTML Paragraf
HTML Rules (Garis Lurus)
HTML Comments
HTML Format Teks
HTML Font
HTML Preformatted Text
HTML List
HTML Acronym
HTML Blockquote
HTML Meta
HTML Link (Hyperlink)
HTML Table
HTML Images
HTML Form
HTML Marquee
BAB IV HTML TAG Dan Attribute List
Pendahuluan
HTML atau HyperText Markup Language merupakan salah satu teknologi internet yang sudah lama
digunakan oleh banyak web master diseluruh dunia untuk membangun situs-situs yang mereka
inginkan. Tanpa adanya HTML, mungkin saat ini kita tidak bisa menikmati yang namanya situs-situs
jejaring sosial, aplikasi mesin pencari, atau game online berbasis website. HTML adalah pelajaran
paling dasar yang harus dikuasai untuk membangun sebuah website. Maka dari itu, sebelum kalian
melangkah ke jenjang yang lebih sulit, disarankan dulu untuk mempelajari HTML.
BAB I Pengenalan HTML

Apa Itu HTML ?
HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat
halaman-halaman website. HTML merupakan bahasa markup yang menggambarkan kepada
browser tentang bagaimana caranya menampilkan format teks, data, dan grafik ke layar
komputer, ketika sedang berkunjung ke sebuah website.
Ingat! HTML bukanlah bahasa pemrograman. HTML adalah bahasa Markup yang digunakan untuk
membuat halaman-halaman website, dan menampilkan halaman-halaman tersebut ke browser.
Tag HTML menginstruksikan kepada browser untuk menampilkan halaman website. Sebuah file
yang merupakan file HTML dan berextensi .html atau .htm dapat dibuka menggunakan web
browser seperti Mozilla Firefox atau Internet Explorer.
Sejarah HTML
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN
pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). Tahun 1980, IBM
memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen
dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang
menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan
Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM
menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat
baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language
sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik
IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language).
ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi
teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari
SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang
menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini
telah berkembang XHTML yang merupakan pengembangan dari HTML.
Web Browser, Code Editor, Dan WYSIWYG

Web Browser, merupakan aplikasi yang digunakan untuk menjelajah halaman website yang
bertebaran didunia maya. Pengguna internet meminta kepada web browser untuk memanggil
halaman website yang di inginkan, menterjemahkan tag-tag HTML menjadi halaman website, dan
kemudian menampilkannya kepada pengguna internet. Web browser yang umum digunakan
contohnya seperti: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Dan lain sebagainya.
Code Editor, adalah software yang digunakan untuk membuat program aplikasi. Dengan
menggunakan code editor, kita dapat menuliskan tag-tag HTML dan membuat dokumen HTML.
Code Editor yang umumnya digunakan untuk membuat halaman website antara lain: Adobe
Dreamweaver (dulunya Macromedia Dreamweaver), MS. Frontpage, Notepad, dan lain-lain.
WYSIWYG, merupakan singkatan dari What You See is What You Get artinya apa yang kamu
lihat, adalah apa yang yang kamu dapat . Istilah ini erat kaitannya dengan kata content. Biasanya
dalam suatu Web dinamis, misalnya konten berita pada website dapat diupdate dan juga dapat
didelete. Tentunya sebagai calon web master, kita harus memikirkan kemudahan untuk pengisian
dan perubahan konten. Didalam penggunaan Content management System, untuk memudahkan
user dalam pengisian ataupun pengeditan konten diperlukan adanya WYSIWYG. Contohnya pada
CMS wordpress, semua form pengisian diberi editor WYSIWYG untuk memudahkan pengisian
konten atau membuat postingan sesuai yang diinginkan.
Dengan editor WYSIWYG kita diberikan pelayanan untuk mengisi artikel ataupun konten berita
dan lainnya, form tersebut dilengkapi dengan toolbar untuk pemformatan teks, tautan,
memasukan gambar, memasukan video, dan lain-lain. Cara inilah yang diterapkan oleh CMS
(Content management System) atau situs penyedia blog seperti wordpress, blogspot, dan
sebagainya. Contoh salah satu editor WYSIWYG adalah TinyMCE yang berbasiskan Java Script.
Lebih jelasnya, Editor WYSIWYG dapat menggantikan peran sebuah TextArea pada form HTML.
Contoh WYSIWYG Pada Miniw0rm CMS
Perbedaan Ekstensi .htm dan .html ?

Ekstensi .htm sebenarnya tidak terlalu berbeda dengan .html, htm adalah versi singkat dari HTML.
Sejarahnya begini, Saat internet baru saja muncul, hampir semua website berjalan di sistem
operasi UNIX. .html adalah ekstensi standar untuk file halaman website. Ketika orang mulai
menggunakan DOS atau windows sebagai server website, ekstensi .html menjadi permasalahan.
Soalnya, DOS dan windows menggunakan format 8.3 untuk nama file. Artinya, nama file tidak
boleh lebih dari 8 karakter dan ekstensinya tidak boleh lebih dari 3 karakter. Jadi, supaya halaman
web bisa dipakai diserver bebasis dos atau windows, dibuatlah standar baru yakni .HTM.
Makanya pada era-era awal internet, orang bisa mengetahui sistem operasi yang digunakan oleh
sebuah web server dengan melihat dari ekstensi filenya saja. Kalau jumlah karakter pada file
ekstensinya 4, berarti sistem operasi yang digunakan adalah UNIX. Kalau panjang ekstensinysa
Cuma 3 karakter, web server bisa menggunakan UNIX atau windows. Sekarang, jumlah karakter
dalam ekstensi ini sudah tidak bisa digunakan karena ekstensi file di windows bisa lebih dari 3.
Jadi, Lebih baik menggunakan ekstensi .html daripada .htm.
BAB II Dasar-Dasar HTML

Langsung saja, sebelum mempelajari dan menuliskan tag html di code editor, ada baiknya kalian
membuka dulu software editor yang kalian miliki. Penulis sarankan untuk menggunakan code
editor bawaan windows yang bernama Notepad. Kemudian jalankan aplikasi notepad dengan cara:
- klik start > all programs > accessories > notepad.
Menjalankan Code Editor Notepad
Tampilan Awal Notepad
TAG HTML
Apa itu TAG? Tag adalah perintah-perintah khusus (markup) yang digunakan untuk menentukan
tampilan dokumen HTML. TAG HTML harus diawali dengan tag pembuka dan diakhiri dengan tag
penutup. Yang musti di ingat adalah Tag penutup HTML harus selalu diberi tanda backslash /
sebelum karakter <.
Contohnya sebagai berikut:
<tag pembuka> </tag penutup>
Contoh jelasnya:
<html> </html>
Tag HTML bersifat no case sensitive, atau tidak sensitif. Artinya Kita bebas menuliskan tag dengan
huruf besar semua atau dengan huruf kecil semua. Contoh: <HTML> <html>. Namun pada XHTML,
semua tag harus ditulis dengan huruf kecil semua. Agar dokumen XHTML yang dibuat sesuai
dengan standar yang telah ditentukan oleh W3c.
Struktur Dokumen HTML

Struktur dokumen HTML terdiri dari 5 bagian, dengan berpedoman pada 3 bagian utama. 5 bagian
tersebut adalah:
<!DOCTYPE>
Document Type Definition (DTD/Doctype) adalah tag yang digunakan untuk menjelaskan versi
HTML, dan harus ditulis pada baris paling awal sebelum tag <html>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Tag Doctype diatas menjelaskan bahwa kita menggunakan HTML versi 4.0 atau yang biasa disebut
XHTML versi 1.0.
Ingat! tanpa harus menuliskan Doctype, dokumen HTML yang kita buat masih dapat berjalan
dengan baik. Namun, W3C menganjurkan agar kita selalu menggunakan <!DOCTYPE> pada baris
paling awal dokumen HTML, supaya sesuai dengan standar yang telah ditetapkan oleh W3C.
<html>
Tag ini digunakan untuk memberitahukan kepada browser bahwa dokumen yang kita buat adalah
dokumen HTML. Tag <html> merupakan salah satu dari tiga bagian utama struktur HTML. Dan
setiap tag lainnya harus ditulis dan berada didalam tag <html> dan </html>, istilahnya diapit. Tag
<html> . </html> juga menandakan bahwa kita akan memulai dan mengakhiri dokumen HTML.
<head>
Tag ini mendefinisikan bahwa <head> adalah bagian header dari suatu file HTML. Biasanya
didalam tag ini berisi tag <title>, tag <meta>, dan tag lain yang masih merupakan bagian dari tag
<head>. Contohnya seperti tag <script>. Selain itu tag <head> juga merupakan salah satu dari 3
bagian utama struktur HTML.
10
<title>
Tag ini berfungsi untuk menampilkan judul dokumen HTML.
<body>
Tag ini berfungsi untuk menampilkan isi dari dokumen HTML. contohnya seperti: Link, image, text,
video, dan semua yang akan ditampilkan ke browser. Tag body merupakan salah satu dari 3 bagian
utama struktur HTML.
Maka, jika semuanya digabungkan struktur lengkapnya adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>Untuk Judul Dokumen HTML</html>
</head>
<body>
Untuk Isi Dokumen HTML
</body>
</html>
Sekarang coba anda ketikan skrip diatas pada aplikasi notepad, dan save dengan nama coba.html,
kemudian jalankan dibrowser. Maka akan tampil sebagai berikut:
Tampilan Coba.html
11
Sekarang ketikan lagi skrip HTML berikut, kemudian save dengan nama tes.html. Lalu jalankan
dibrowser. Ingat! Ekstensi .html-nya jangan lupa ditulis yak :D
<html>
<head>
<title>Judul Website Virgiawan Listanto</html>
</head>
<body>
Tes aja mas :D
</body>
</html>
Maka akan tampil sebagai berikut:
Tampilan Tes.html
Bagaimana? Bisa dijalankan to? Hehe.. :D

Jadi, dapat kita simpulkan bahwa penggunaan doctype pada html tidak wajib digunakan. Namun,
jika ingin memenuhi standar yang telah ditentukan oleh W3C, tag <!DOCTYPE> harus slalu
disertakan pada baris paling awal dokumen HTML yang kita buat.
12
Element HTML
Apa itu Element HTML? Element HTML adalah nama tag yang terdiri dari 3 bagian, yaitu: tag
pembuka, isi, dan tag penutup.
Contohnya seperti ini:
<tag pembuka> isi </tag penutup>
Contoh jelasnya:
<body> isi </body>
<p> isi </p>
<b> isi </b>
<title> isi judul html </title>
<p> = adalah element yang digunakan untuk membuat paragraph.

<b> = adalah element yang digunakan untuk membuat huruf menjadi tebal (bold).
<title> = adalah element yang digunakan untuk mendefinisikan judul dokumen html.
Elemen HTML mempunyai ciri-ciri sebagai berikut:

Elemen HTML dimulai dengan tag pembuka.
Elemen HTML diakhiri dengan tag penutup.
Isi Elemen HTML adalah semua yang terdapat diantara tag pembuka dan tag penutup.
Beberapa elemen HTML ada yang tidak memiliki isi dan tag penutup.
Elemen yang tidak memiliki isi ditutup pada awal tag />.
Sebagian besar elemen HTML dapat diberi atribut tertentu.
Element yang tidak memiliki isi dan tag penutup contohnya:

<hr />
<br />
<hr /> adalah element yang akan membuat garis lurus.

<br /> adalah element yang akan membuat baris baru (line break).
13
Tag-tag yang ditulis secara berpasangan artinya yang memiliki tag pembuka dan tag penutup,
dan yang musti di ingat adalah penulisan tag yang memiliki pasangan tidak boleh saling tumpah
tindih dengan pasangan tag lain.
Contoh penulisan tag yang salah (tumpah tindih dengan pasangan tag lain):
<p>
<b> </p>
</b>
Contoh penulisan tag yang benar:

<p>
<b> </b>
</p>
Penjelasan:
Tag <p> Harus berpasangan dengan tag </p>
Tag <b> Harus berpasangan dengan tag </b>
Attribute HTML
Apa itu Attribute HTML? Attribute HTML adalah property dari suatu element HTML. Attribut HTML
terdiri atas nama dan nilai.

<tag nama-attribute=nilai-attribute>
Contoh jelasnya:
<body bgcolor=black>
<body = adalah element html (nama tag)

bgcolor = adalah nama attribute
black = adalah nilai attribute
14
Contoh lainnya:
<font color=red> Isi </font>
<font = element html

color = adalah nama attribute
red = adalah nilai attribute
Isi = adalah isi element html
</font> = adalah tag penutup
Contoh Lagi:
<div align=center>
<div = adalah element html

align = adalah nama attribute
center = adalah nilai attribute
Ingat! Nilai attribute harus berada didalam tanda petik dua , contohnya jika kita ingin mengubah
warna background html menjadi kuning, maka penulisan yang benar adalah seperti ini:
<body bgcolor=yellow>
Sebenarnya nilai attribute yang tidak diberi tanda petik dua masih bisa dijalankan di browser,
namun agar memenuhi standar yang telah ditetapkan oleh W3C, maka ada baiknya kita
menggunakan tanda petik dua untuk mendefinisikan nilai attribute. Dan ingat! Harus ditulis
menggunakan huruf kecil semua yak :D
15
BAB III HTML Fundamental

HTML Heading
HTML Heading berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dari yang
terbesar hingga yang terkecil. Nilai untuk ukuran huruf yang paling besar adalah <h1>, sedangkan
yang paling kecil adalah <h6>. Agar lebih jelas, mari kita praktekan! Ketikan skrip berikut pada
notepad, lalu simpan dengan nama heading.html
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1> Belajar Heading </h1>
</body>
</html>
Maka hasilnya akan tampak seperti ini:
16
HTML Paragraf
Untuk membuat paragraf HTML kita dapat menggunakan tag <p> dan </p>. Oke, Langsung saja
kita praktekan sodara-sodara. Ketikan skrip berikut, simpan dengan nama paragraf.html, lalu
jalankan dibrowser kesayangan anda.
<html>
<head>
<title>Latihan Paragraf HTML</title>
</head>
<body>
<p> Belajar buat paragraf </p>
<p> Belajar buat paragraf yak :D </p>
<p> Tes buat paragraf yak :D </p>
</body>
</html>
Hasil penggunaan tag <p> dan </p>
Ngomong2, kita bisa juga lho menggabungkan beberapa tag html pada 1 file .html. Misalnya
seperti contoh berikut ini. Ketikan skrip berikut, lalu save dengan nama coba.html, kemudian
jalankan dibrowser kesayangan anda dan lihatlah hasilnya.
17
<html>
<head>
<title>Contoh: Inilah HTML Sebenarnya</title>
</head>
<body>
<b> Ini Judul cetak tebal </b>
<p> <b> ini judul cetak tebal didalam paragraf </b> </p>
<br /> <br />
<h1> ini judul heading 1 </h1>
<p> <h1> ini judul heading 1 dalam paragraf </h1> </p>
<hr />
<h4> hallo, aku heading 4, dan aku berada didalam tag body :D </h4>
</body>
</html>
Maka, hasilnya akan tampak sebagai berikut:
18
HTML Rules (Garis Lurus)

Untuk membuat garis lurus, kita dapat menggunakan tag <hr />, contohnya sebagai berikut:
<html>
<head>
<title>membuat garis lurus</title>
<head>
<body>
Dibawah saya ada garis lurus <hr />
Garis lurus diatas saya dibuat pakai tag hr :D
</body>
</html>
HTML Comments
Untuk mendefinisikan komentar pada suatu skrip html, kita dapat menggunakan tag
, fungsi tag komentar sendiri adalah untuk memberi tanda pada skrip yg kita tulis.
<html>
<head> <title> membuat komentar </title> </head>
<body>
 komentar sendiri nggak bisa keliatan dibrowser :D
</body>
</html>
19
HTML Format Teks

Untuk melakukan pemformatan terhadap suatu teks, kita dapat menggunakan beberapa tag html
seperti yang tertera pada tabel dibawah ini.
Tag HTML
Deskripsi
<b> </b>
Digunakan untuk membuat huruf menjadi tebal (bold)
<u> </u>
Digunakan untuk membuat huruf menjadi garis bawah (underline)
<i> </i>
Digunakan untuk membuat huruf menjadi miring (italic)
<strike> </strike>
Digunakan untuk membuat huruf menjadi garis tengah
<small> </small>
Digunakan untuk membuat huruf yang sangat kecil
<big> </big>
Digunakan untuk membuat huruf yang lebih besar dari normal
<sup> </sup>
Digunakan untuk membuat huruf Superscript superscript
<sub> </sub>
Digunakan untuk membuat huruf Subscript subscript
<center> </center>
Digunakan untuk membuat huruf ke tengah (center)
<em> </em>
Digunakan untuk membuat huruf miring (sama seperti <i>)
<del> </del>
Digunakan untuk membuat huruf garis tengah (sama seperti <strike>)
<strong> </strong>
Digunakan untuk membuat huruf tebal (sama seperti <b>)
<ins> </ins>
Digunakan untuk membuat huruf garis bawah (sama seperti <u>)
Lebih jelasnya, mari kita coba ketikan satu persatu tag html diatas pada notepad. Lalu save dengan
nama format-text.html, kemudian jalankan dibrowser. jangan lupa berikan tag <br /> untuk
membuat baris baru (line break/enter), agar text tidak terlihat kacau di browser.
20
<html>
<head>
<title>format teks</title>
</head>
<body>
<b>Ini adalah huruf tebal</b> <br />
<u>Ini adalah huruf garis bawah</u> <br />
<i>Ini adalah huruf miring</i> <br /><br />
<strike> ini adalah huruf garis tengah </strike> <br />
<small> Ini adalah huruf yang sangat kecil </small> <br />
<big> Ini adalah huruf yang lebih besar dari normal </big> <br />
<sup> Ini adalah huruf superscript </sup> <br />
<sub> Ini adalah huruf subscript </sub> <br /> <br />
<em> Ini adalah huruf miring dengan tag em </em> <br />
<del> Ini adalah huruf garis tengah dengan tag del </del> <br />
<strong> Ini adalah huruf tebal dengan tag strong </strong> <br />
<ins> Ini adalah huruf garis bawah dengan tag ins </ins>
</body>
</html>
21
HTML Font
Untuk mendefinisikan suatu font, kita dapat menggunakan tag <font> dan </font>. Selain itu,
untuk mengubah jenis huruf, ukuran, dan warna, kita dapat menggunakan beberapa attribute
seperti yang tertera pada tabel dibawah ini.
Tag HTML
<font> </font>
Attribute
Deskripsi
size="nilai"
Digunakan untuk menentukan ukuran huruf.

Contoh: <font size=3> ini font ukuran 3pt </font>
face=nilai
Digunakan untuk menentukan jenis huruf. Contoh:

<font face=verdana> ini font verdana </font>
<font face=arial> ini font arial </font>
Color=nilai
Digunakan untuk menentukan warna huruf.

Contoh: <font color=green> ini font hijau </font>
Contoh:
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<font size=4> Ini adalah font ukuran 4pt </font> <br />
<font color=blue> ini adalah font warna biru </font> <br />
<font face=verdana> ini adalah font jenis verdana </font> <br /> <br />
<font face=arial size=4 color=green>
ini adalah font warna hijau, dengan jenis huruf arial, dan berukuran 4pt :)
</font>
</body>
</html>
22
HTML Preformatted Text

HTML Preformatted text di definisikan menggunakan tag <pre> dan </pre>. Tag ini berfungsi untuk
menampilkan tulisan seperti yang kita tulis apa adanya dicode editor.
Contohnya:
<html>
<head>
<title>HTML Preformatted Text</title>
</head>
<body>
<pre>
Saya lagi belajar html preformatted text
Menggunakan
Tag pre, kamu mau ikutan nggak?
Kalo mau ayo :D
</pre>
</body>
</html>
23
HTML List
HTML List digunakan untuk membuat daftar (list), yang fungsinya untuk mengelompokan data baik
secara (Ordered List) ataupun (Unordered List). Ordered list artinya data diurutkan secara
berurutan contohnya seperti 1, 2, 3 dan seterusnya. Sedangkan Unordered list artinya data
diurutkan secara tidak berurutan, dan biasanya ditandai dengan lambang bulatan hitam.
Tag yang digunakan untuk ordered list adalah <ol> </ol> yang didalamnya terdapat elemen list
yaitu tag <li> dan </li>, sedangkan tag yang digunakan untuk unordered list adalah <ul> </ul>
yang didalamnya juga terdapat element list yaitu tag <li> dan </li>. Contohnya sebagai berikut:
<html>
<head>
<title>HTML List</title>
</head>
<body>
Daftar belanjaan hari ini:
<ol>
<li> Gula </li>
<li> Semen </li>
<li> Marmer </li>
<li> Magic Jar </li>
</ol>
24
Daftar Makan Sahur:

<ul>
<li> Telur dadar </li>
<li> Nasi Goreng </li>
<li> Rendang Ayam </li>
<li> Soto dan Asbes </li>
</ul>
</body>
</html>
Selain itu HTML List juga memiliki attribute dan value/nilai masing-masing untuk mensetting
tampilan list. Berikut penjelasan singkatnya:
Tag <ol>
Attribute
type=value
<ol> </ol>
start=nilai
Nilai (value)
Deskripsi
Digunakan untuk huruf besar romawi
Digunakan untuk huruf kecil romawi
Digunakan untuk huruf alphabet besar
Digunakan untuk huruf alphabet kecil
angka
Digunakan untuk memulai list dari angka yang

telah ditentukan
25
Contoh <ol>:
<html>
<head>
<title> HTML List OL (Custom) </title>
</head>
<body>
Daftar belanjaan hari esok:
<ol start=2 type=I>
<li> Kawat </li>
<li> Linggis </li>
<li> Amplas </li>
</ol>
Daftar minuman hari ini:
<ol start=3 type=i>
<li> the sisri </li>
<li> air putih </li>
<li> spirtus </li>
</ol>
Daftar makan sahur hari ini:
<ol start=1 type=A>
<li> kolak singkong </li>
<li> pisang ambon </li>
<li> anggur merah </li>
</ol>
Daftar download hari ini:
<ol start=5 type=a>
<li> lagu Sheila on 7 - DAN </li>
<li> software adobe flash </li>
<li> video masak </li>
</ol>
</body>
</html>
26
Hasilnya dapat dilihat pada gambar dibawah ini:
Tag <ul>
Attribute
Nilai (value)
square
<ul> </ul>
type=value
Deskripsi
Membuat list menjadi tanda kotak
disc
Membuat list menjadi tanda titik
circle
Membuat list menjadi tanda lingkaran
Contoh <ul>:
<html>
<head>
<title> HTML List UL (Custom) </title>
</head>
<body>
Daftar belanjaan hari esok:
<ul type=square>
<li> Kawat </li>
<li> Linggis </li>
</ul>
27
Daftar minuman hari ini:

<ul type=disc>
<li> the sisri </li>
<li> air putih </li>
</ul>
Daftar makan sahur hari ini:
<ul type=circle>
<li> kolak singkong </li>
<li> pisang ambon </li>
</ul>
</body>
</html>
Hasilnya akan terlihat seperti ini:
HTML Acronym
HTML Acronym digunakan untuk memberikan keterangan pada saat kita meletakkan cursor mouse
diatas sebuah kata. Tag acronym didefinisikan oleh tag <acronym> dan </acronym>. Untuk
menggunakannya, tag acronym diikuti oleh attribute title=value, artinya isi didalam title
tersebutlah yang akan keluar pada saat kita meletakkan kursor diatas sebuah kata.
28
Contoh:
<html>
<head>
<title>HTML Acronym</title>
</head>
<body>
<acronym title=Kodok Juga Virgiawan Listanto>
Hallo, Nama saya kodok :D
</acronym>
</body>
</html>
HTML Blockquote
Mendefiniskan kutipan panjang. Tag yang digunakan adalah <blockquote> dan </blockquote>.
<html>
<head>
<title>HTML Blockquote</title>
</head>
<body>
Kutipan hari ini:
<blockquote>
Brantas Koruptor di negeri kita!! Jangan mau jadi rakyat yang ditindas!! Indonesia merdeka!!
</blockquote>
</body>
</html>
29
HTML Meta
Digunakan untuk memberikan infromasi mengenai suatu halaman web kepada search engine
(seperti: google, yahoo, dkk). Tag yang digunakan adalah tag <meta />.
Penggunaan Tag meta:
Contoh1: <meta name=value content=value />
Contoh2: <meta http-equiv=content-type content=text/html;charset=UTF-8 />
Penjelasan:
name=value, mendefinisikan nama dan nilai attribute tag meta.
content=value, mendefinisikan ISI dari tag meta. Misalnya:
<meta name=author content=kodok />, artinya author websitenya bernama kodok.
http-equiv=content-type, fungsi http-equiv adalah untuk mensimulasikan respon HTTP Header.

Sedangkan value content-type menentukan character set untuk isi dokumen HTML.
Jadi, Character set yg digunakan adalah charset=UTF-8, sedangkan isi dokumennya adalah
text/html; Lihat kembali pada contoh penggunaan tag-meta nomor 2.
Pengertian Character set sendiri adalah urutan simbol-simbol yang digunakan komputer untuk
menampilkan data. Character set mencakup huruf, angka, tanda baca, control character dan
simbol-simbol grafis. Kemudian Character Set tipe utf8, character set tipe ini dapat dimanfaatkan
untuk menyimpan data-data karakter yang non latin seperti Arab, Korea, Jepan, China.
30
Sedangkan character set tipe lain adalah Unicode, Unicode merupakan suatu standar industri yang
dirancang untuk mengizinkan teks dan simbol dari semua sistem tulisan didunia, untuk
ditampilkan dan dimanipulasi secara komputer. Unicode dikoordinasi dan dikembangkan oleh
suatu organisasi nirlaba yaitu Unicode Consortium.
Ingat! Penggunaan tag meta harus lengkap dan tidak boleh ada yang kurang. Contohnya:
<meta name=author /> penggunaan tag meta ini salah karena tidak menyertakan attribute
content untuk mendefinisikan ISI dari value author.
Tag <meta />
Attribute
<meta />
name=value
Nilai (value)
Deskripsi
keywords
Mendefinisikan kata kunci website
description
Mendefinisikan deskripsi website
author
Mendefinisikan pembuat website
copyright
distribution
expires
generator
googlebot
refresh
revisit-after
robots
Mendefinisikan copyright (hak cipta) website

Mendefinisikan distribusi website apakah
website tersebut digunakan untuk intranet apa
internet (full-web)
Mendefinisikan tanggal dan waktu kapan
berakhirnya masa aktif website
Mendefinisikan suatu halaman web dibuat oleh
software/perangkat lunak apa. Contohnya
notepad, dreamweaver, wordpress, blogger, dll
Menginformasikan kepada mesin pencari
Google tentang pengindeksan, pengarsipan
website.
Digunakan untuk melakukan refresh halaman
website. biasanya dalam penggunaan value
refresh, dapat ditentukan waktu refreshnya.
Misalnya waktu refreshnya 3 detik. Selain itu
bisa juga digunakan untuk melakukan redirect
kehalaman lain
Mendefinisikan seberapa sering mesin pencari
harus meninjau situs anda
Mendefinisikan penggunaan robots.txt, fungsi
robots.txt adalah untuk memperbolehkan atau
tidaknya search engine melakukan pengindex-an
halaman website anda
31
Digunakan untuk mendefinisikan ISI dari

attribute name= dan http-equiv= Contohnya
seperti yang telah dijelaskan pada penjelasan
sebelumnya.
content=text
http-equiv=..
content-type
Digunakan untuk menentukan character set

untuk isi dokumen HTML
cache-control
Value http-equiv yang satu ini digunakan untuk

mengontrol mekanisme caching pada suatu
dokumen html
date
expires
last-modified
Mendefinisikan kapan tanggal dan waktu

pembuatan website
Mendefinisikan kapan website akan berakhir
Mendefinisikan kapan website terakhir
dimodifikasi
location
Mengalihkan user yang mengakses halaman

kehalaman lain. (meredirect halaman)
refresh
Melakukan refresh terhadap halaman sesuai

waktu yang ditentukan
Contoh penggunaan Meta Tag:

<html>
<head>
<meta name=keywords content=belajar web, tutorial web, kuliah web />
<meta name=description content=Miniw0rm University adalah tempat belajar web />
<meta name=author content=virgiawan listanto />
<meta name=expires content=Fri, 30 Dec 2011 12:00:00 GMT />
<meta name=generator content=Miniw0rm CMS />
<meta name=distribution content=web />
<meta http-equiv=content-type content=text/html;charset=UTF-8 />
<meta http-equiv=date content=Wed, 16 Feb 2011 22:34:13 GMT />
<meta http-equiv=last-modified content=Wed, 16 Feb 2011 22:34:13 GMT />
<title>Menggunakan Meta Tag Attribute Name</title>
</head>
<body>
Jajal meta tag :D
</body>
</html>
32
HTML Link (Hyperlink)

Apa itu Link? Link adalah suatu tombol yang dapat mengarahkan kita menuju kehalaman lain.
Bentuk link bermacam-macam, bisa jadi suatu teks atau gambar. Link didefinisikan dengan
menggunakan tag <a> dan </a>. Pada buku sebelumnya sudah disinggung mengenai link eksternal
dan internal. Link eksternal adalah link yang mengarahkan kita ke halaman lain dan membuat
jendela tab baru dibrowser. Sedangkan link internal adalah link yang mengarahkan kita ke
halaman lain pada jendela tab yang sama. Berikut spesifikasi penggunaan tag <a> dan </a>.
Tag <a>
Attribute
Deskripsi
<a> </a>
href=url
Mendefinisikan link ke alamat tujuan, misalnya kehalaman lain

atau ke sebuah alamat situs
Mendefinisikan target link, baik itu link eksternal atau link
internal.
Contoh internal link: <a href=kontak.html />

Contoh internal link2: <a href=kontak.html target=_none />
target=value
Contoh eksternal link: <a href=kontak.html target=_blank />
Target _none adalah target yg membawa kita ke halaman lain
dijendela tab yang sama. Sedangkan target _blank adalah target
yang membawa kita ke halaman lain dijendela tab yang baru
Contoh penggunaan internal link:

1. Buat file html bernama index.html dan isi script berikut:
<html>
<head>
<title>Internal Link</title>
</head>
<body>
Ini adalah halaman utama :D <a href=kontak.html> klik disini </a>
untuk berpindah kehalaman kontak
</body>
</html>
33
2. Buat file kontak.html untuk halaman kontak. Dan isi script berikut:
<html>
<head>
<title>Ini File Kontak.html</title>
</head>
<body>
Hallo, saya adalah halaman kontak :D
</body>
</html>
Setelah itu jalankan file index.html dibrowser. Kemudian klik teks berwarna biru klik disini dan
lihatlah hasilnya :D
Tampilan index.html Sebelum di klik
Tampilan file kontak.html setelah anda menlakukan klik pada link klik disini
34
Contoh penggunaan external link:

1. Buat file bernama index.html, kemudian isi script berikut:
<html>
<head>
<title>Eksternal Link</title>
</head>
<body>
aku adalah file index.html, silahkan <a href=kontak.html target=_blank> klik disini </a>
untuk berpindah ke kontak.html
</body>
</html>
2. Buat file bernama kontak.html, kemudian isi script berikut:

<html>
<head>
<title>Ini File Kontak.html</title>
</head>
<body>
Hallo, saya adalah halaman kontak :D
</body>
</html>
Setelah itu jalankan file index.html dibrowser. Kemudian klik teks berwarna biru klik disini dan
lihatlah hasilnya :D
Tampilan index.html Sebelum di klik
35
Tampilan file kontak.html setelah anda menlakukan klik pada link klik disini
HTML Table
Penggunaan tabel pada HTML didefinisikan dengan menggunakan tag <table> dan </table>.
Bagian utama dari tabel adalah cell, cell sendiri didefinisikan dengan tag <td> dan </td>.
Sedangkan untuk membuat beberapa baris cell kita dapat menggunakan tag <tr> dan </tr>.
Sederhananya, cell adalah kolom. Kolom = ke samping, sedangkan baris = ke bawah.
Tabel HTML memiliki beberapa attribute, selengkapnya bisa dilihat pada tabel berikut ini:
Tag <table>
Attribute
Deskripsi
<table>
</table>
border=value
Mendefinisikan border tabel (bingkai). Value/nilai attribute

border didefinisikan menggunakan angka dari 1 tak
terhingga
bgcolor=value
Mendefinisikan warna background tabel. Value/nilai

attribute bgcolor didefinisikan menggunakan code warna
html. Seperti red, yellow, green, blue, atau warna2 html
dalam bentuk hexadecimal contoh: #ffffff, #ff0000, #ffff00,
dll.
Mendefinisikan jarak spasi dari border cell ke text.

cellpadding= value Value/nilai
attribute
cellpadding
didefinisikan
menggunakan angka dari 1 tak terhingga
cellspacing=value
Mendefinisikan jarak spasi antar cell (kolom). Value/nilai

attribute cellscpacing didefinisikan menggunakan angka
dari 1 tak terhingga
width=value
height=value
width=value Mendefinisikan lebar tabel. Sedangkan

height=value Mendefinisikan tinggi tabel. Value/nilai
width & height didefinisikan menggunakan angka dari 1
tak terhingga
36
Contoh penggunaan tag <table> dan tag kolom <td>:

<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border=1 cellpadding=20 cellspacing=6>
<td>Ini adalah kolom 1</td>
</table>
</body>
</html>
Dapat dilihat pada gambar diatas, bahwa cellspacing mengatur jarak spasi antar cell, sedangkan
cellpadding mengatur jarak spasi dari border cell ke text. Nilai cellspacing=6 membuat jarak
antar cell menjadi agak renggang sedikit, sedangkan Nilai cellpadding=20 membuat jarak dari
border-cell ke text ini adalah kolom menjadi sangat renggang. Agar para pembaca lebih mudeng,
silahkan praktekan sendiri, dan ubahlah nilai2 pada cellspacing dan cellpadding diatas :D
37
Contoh penggunaan tag <table>, tag <td>, dan tag baris <tr>:
<html>
<head>
</head>
<body>
<tr>
</tr>
<tr>
<td>ini adalah kolom dengan baris baru</td>
</tr>
</table>
</body>
</html>
Kesalahan yang sering dilakukan pada pembuatan kolom dan baris pada tabel
Pada penulisan baris <tr> dan kolom <td> para calon-calon web master biasanya banyak sekali
yang sering melakukan kesalahan. Lha terus salahnya dimana? Untuk menjawab pertanyaan ini,
mari kita praktekan langsung!
38
Tulis kode berikut di notepad, kemudian save dengan nama kesalahan1.html

<html>
<head>
</head>
<body>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Sekarang jalankan dibrowser, dan lihatlah hasilnya:
Nah lo! Ketahuan kan salahnya dimana :D hehe..

Kesalahanya ada pada penulisan skrip yang telah saya berikan tanda merah berikut ini:
39
<html>
<head>
</head>
<body>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
SALAH
Kenapa bisa salah? Ya karena pada skrip diatas, kolom yang dibuat pada baris kedua adalah 3
kolom, sedangkan pada baris awal adalah 2 kolom, jadi untuk membenarkannya kita cukup
menambahkan skrip <td>Ini adalah kolom 3</td> pada baris awal tabel. Contohnya seperti ini:
Buat file pembenaran1.html kemudian isi skrip berikut:
<html>
<head>
</head>
<body>
<tr>
</tr>
40
<tr>
</tr>
</table>
</body>
</html>
Kemudian jalankan dibrowser, dan lihatlah hasilnya:
Jadi intinya, kalau pada baris awal terdapat 3 kolom, maka pada baris kedua juga harus 3 kolom.
Jika baris awalnya 2 kolom, baris seterusnya juga harus 2 kolom.
Merge cell
Apa itu merge cell? Merge cell adalah penggabungan cell. Jadi misalkan kita memiliki 3 cell, terus
kita ingin menggabungkan ketigannya menjadi 1, maka kita harus menggunakan yang namanya
merge cell. Atau misalnya kalian memiliki 2 baris cell, terus ingin menggabungkannya menjadi 1
maka ya harus menggunakan merge cell ini :D Merge cell sendiri terdapat pada tag <td>, yang
diberi attribute colspan dan rowspan.
colspan digunakan untuk menggabungkan kolom, sedangkan rowspan digunakan untuk

menggabungkan baris. Agar lebih jelas, langsung saja kita praktekan!
41
Ketikan skrip berikut, kemudian save dengan nama cobagabung.html

<html>
<head>
</head>
<body>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Jika kita perhatikan, gambar tampilan file cobagabung.html diatas terlihat biasa2 saja ya? Oke,
sekarang kita akan mencoba menggabungkan 3 kolom pada baris paling atas :D caranya dengan
menggunakan attribute colspan, oke cekibrot!
42
Buat file dengan nama gabungkolom.html, dan ketikan skrip berikut:

<html>
<head>
</head>
<body>
<tr>
<td colspan=3 align=center>Ini adalah kolom 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasilnya akan tampak sebagai berikut:
Wow! Sudah bergabung ternyata :D kenapa bisa begitu? Karena 3 kolom pada baris awal yang
tadinya belum bergabung sudah kita gabungkan menggunakan perintah ini:
<td colspan=3 align=center>Ini adalah kolom 1</td>
Tag Colspan=3 adalah perintah yang menggabungkan 3 kolom, yaitu ini adalah kolom 1, ini
adalah kolom 2, dan ini adalah kolom 3. Sedangkan tag align=center adalah tag yang membuat
teks ini adalah kolom 1 menjadi rata tengah :D
43
Sekarang mari kita coba menggabungkan baris dengan menggunakan perintah rowspan=value.
Buat file dengan nama cobabaris.html, kemudian ketikan skrip berikut:
<html>
<head>
<title>3 Baris Cell</title>
</head>
<body>
<table border="2" cellpadding="5" cellspacing="1">
<tr>
<td>tes 1</td>
<td>tes 2 </td>
<td>tes 3 </td>
</tr>
<tr>
<td>tes 4</td>
<td>tes 5 </td>
<td>tes 6 </td>
</tr>
<tr>
<td>tes 7</td>
<td>tes 8 </td>
<td>tes 9 </td>
</tr>
</table>
</body>
</html>
Sekarang jalankanlah file tersebut, dan lihatlah hasilnnya :D
44
Hmmmm.. tampak biasa-biasa saja yak. Oke, kita analisis. Pada skrip cobabaris.html terdapat 3
baris dan 3 kolom. Dengan isi tes 1, tes 2, tes 3, tes 4, sampai tes 9. Nah, sekarang yang ingin kita
lakukan adalah MENGGABUNGKAN BARIS. Sebelum menggabungkan baris, ada baiknya kita
analisis dulu jumlah barisnya ada berapa.
Pada gambar diatas, kita dapat mengetahui jumlah barisnya yaitu 3 baris. Baris pertama terdapat
pada kolom tes 1, tes 2, dan tes 3. Baris kedua terdapat pada kolom tes 4, tes 5 dan tes 6, dan
baris ketiga terdapat pada kolom tes 7, tes 8 dan tes 9. Oke mari kita lakukan penggabungan.
Ketikan skrip berikut, lalu simpan dengan nama gabungbaris.html
<html>
<head>
<title>3 Baris Cell</title>
</head>
<body>
<table border="2" cellpadding="5" cellspacing="1">
<tr>
<td rowspan="3">tes 1</td>
<td>tes 2 </td>
<td>tes 3 </td>
</tr>
<tr>
<td>tes 4</td>
<td>tes 5 </td>
<td>tes 6 </td>
</tr>
45
<tr>
<td>tes 7</td>
<td>tes 8 </td>
<td>tes 9 </td>
</tr>
</table>
</body>
</html>
Sekarang lihatlah hasilnya :D
Hayooo..!! apanya yang beda :)) hehe.. karena tadi kita telah menggabungkan 3 baris pada kolom
tes 1, maka jadilah seperti itu :D perintahnya ada pada sintaks berikut:
<td rowspan="3">tes 1</td>
rowspan=3, menggabungkan 3 jumlah baris.

<td rowspan=3>tes1</td>, menggabungkan 3 jumlah baris menjadi 1 baris dikolom tes 1.
Gimana? Mudeng? Atau malah ruwet =)) kalau masih ruwet silahkan dicerna lagi yak =))
Heading Cell
Untuk menambahkan heading cell, kalian dapat menggunakan tag <th> dan </th>. Heading cell
sendiri mengubah isi teks didalam kolom menjadi huruf tebal. Contohnya sebagai berikut:
46
<html>
<head>
<title>Heading Cell</title>
</head>
<body>
<tr>
<th>heading cell 1</th>
</tr>
<tr>
<td>ini kolom</td>
<td>ini kolom</td>
<td>ini kolom</td>
</tr>
</table>
</body>
</html>
Caption
Caption digunakan untuk membuat label pada tabel. Caption sendiri didefinisikan menggunakan
tag <caption> dan </caption>. Tag caption sendiri digunakan setelah tag <table> Contohnya:
<table>
<caption>Ini adalah tabel siswa</caption>
</table>
47
HTML Images
HTML images didefinisikan dengan tag <img />. tag ini juga memiliki beberapa attribute, seperti
yang tertera pada tabel dibawah ini.
Tag <img />
Attribute
<img />
src=location_image
Deskripsi
Mendefinisikan lokasi tujuan dimana gambar berada.
Contoh penggunaannya:
<img src=folder/gambar.jpg />
<img src=gambar.jpg />
<img src=http://miniw0rm.us/gambar.jpg />
Mendefinisikan text alternatif untuk keterangan gambar.
alt=alternate_text
width=value
height=value
Contohnya:
<img src=foto1.jpg alt=ini adalah foto aku />
Mendefinisikan lebar dan tinggi gambar. Width=
mendefinisikan lebar gambar, sedangkan height=
mendefinisikan tinggi gambar.
Value/nilai pada kedua attribute tersebut didefinisikan
menggunakan angka, dari 1 sampai tak terhingga.
align=value
Mendefinisikan letak gambar, misalnya align=center

artinya gambar berada ditengah, align=left gambar
berada dikiri, dsb.
Value/nilai align:
- center
- left
- middle
- top
- baseline
- absmiddle
- bottom
- justify
- right
48
Contoh penggunaan tag <img />

1. Siapkan sebuah gambar, terserah gambar apa saja. Misalnya saya memiliki gambar dengan
nama virgi.jpg.
2. Kemudian buat file cobaimage.html, lalu save dan letakkan file ini satu tempat dimana anda
meletakkan gambar tersebut.
cobaimage.html
<html>
<head>
<title>Mencoba Tag image</title>
</head>
<body>
<img src=virgi.jpg alt=ini foto saya />
</body>
</html>
Sekarang jalankan dan lihatlah hasilnya:
Wew, ganteng yak =)) =)) wkwkkwkwwk. Nah sekarang coba ganti gambar virgi.jpg dengan
gambar kalian :D hehe..
49
Format Gambar
Format gambar yang umumnya digunakan adalah:
1. JPEG (Join Photographic Expert Image), Ekstensinya = .jpg
2. GIF (Graphical Interchange Format), Ekstensinya = .gif
3. PNG (Portable Network Graphic), Ekstensinya = .png
Contoh penggunaan tag <img> dengan gambar yang berada didalam suatu folder.
1. Buat folder dengan nama coba.
2. Letakkan gambar apa saja yang berekstensi sesuai dengan format diatas, contoh: virgi.jpg
didalam folder coba.
3. Kemudian ketikan skrip berikut, lalu save dengan nama imagefolder.html dan letakkan diluar
folder coba.
<html>
<head>
</head>
<body>
<img src=coba/virgi.jpg alt=ini foto saya yang berada didalam folder coba />
<br /> Hallo, ini foto saya yang berada difolder coba :D
</body>
</html>
50
Sekarang kita coba untuk melakukan peng-insert-an gambar yang berada didalam suatu website.
misalnya saya memiliki gambar yang berada di url: http://w3schools.com/images/pulpit.jpg
Dan pastinya anda harus terkoneksi dengan internet dulu, untuk meload gambar yang berada diurl
tersebut :D
<html>
<head>
</head>
<body>
<img src=http://w3schools.com/images/pulpit.jpg />
</body>
</html>
Jika anda terkoneksi internet, dan sudah menjalankan skrip diatas,

maka akan tampil seperti gambar dibawah ini:
51
Contoh Tag <img /> dengan format ukuran panjang dan lebar.
<html>
<head>
</head>
<body>
<img src=virgi.jpg alt=ini foto saya width=180 height=125 />
</body>
</html>
Gambar semula:
Gambar setelah diformat:
52
HTML Form
Sering liat aplikasi buku tamu atau chatbox pada suatu website kan? Terus aplikasi tersebut dibuat
oleh apa? Aplikasi tersebut dibuat oleh HTML Form untuk tampilan formnya. Aduuh pusing =))
Jadi gini, Form adalah sebuah formulir online yang biasanya digunakan untuk meminta umpan
balik pengunjung website. Form sendiri didefinisikan menggunakan tag <form> dan </form>.
Didalam tag <form> terdapat beberapa tag lagi seperti, <input />, <textarea>, <select>, <option>,
<button>, <label>, dan lain sebagainya. Dari pada bingung, mari kita bahas!
Tag <form> memiliki beberapa attribute seperti yang tertera pada tabel berikut.
Tag <form>
Attribute
Deskripsi
<form>
</form>
action=value
Mendefinisikan lokasi tujuan dimana data inputan dari

form akan dikirim.
method=value
Mendefinisikan metode pengiriman data inputan pada

form.
Value pada method ada dua, yaitu:
1. get
2. post
method=get, artinya data inputan form akan dikirimkan
melalui query string pada URL. Sederhananya, data itu
diproses dan ditampilkan di address bar :D jadi agak
berbahaya ckckkc..
method=post, artinya data inputan form akan diproses
secara langsung sesuai dengan lokasi page yang terdapat
pada attribute action= form.
enctype=value
Selengkapnya nanti akan kita bahas pada buku selanjutnya

tentang programming aplikasi web dengan PHP & Mysql
Digunakan untuk menentukan jenis encode untuk data
yang akan dikirimkan melalui form.
Value pada attribute enctype adalah :
application/x-www-form-urlencoded, multipart/form-data,
text/plain
Biasanya attribute enctype digunakan untuk aplikasi
website yang memiliki fasilitas upload file.
53
Contoh penggunaan form:

<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form action=fileproses.php target=post>
. Isi .
</form>
</body>
</html>
Element Input
Elemen input berfungsi untuk mendefinisikan tampilan input yang akan dimasukkan oleh
pengunjung website. Penggunaan elemen ini didefinisikan dengan tag <input />, selain itu elemen
input memiliki beberapa attribute, yaitu: name, type, size, value, checked.
Tag <input />
Attribute
name=value
<input />
size=value
value=value
Deskripsi
Mendefinisikan nama dari suatu elemen input
Mendefinisikan ukuran panjang pada suatu elemen input
Mendefinisikan nilai awal/reset/submit disuatu elemen input
Mendefinisikan bentuk-bentuk tampilan elemen input.
Value untuk attribute type= antara lain:
type=value
checked
1.
2.
3.
4.
5.
6.
7.
8.
text
checkbox
radio
submit
reset
password
file
image
Mendefinisikan pilihan yang terpilih pada elemen input yang

memiliki type berjenis checkbox/radio.
54
Text Fields
Text fields adalah salah satu Type elemen input. Untuk membuat text fields, kita dapat
mengunakan perintah: <input type=text />. Dan ingat! tag <input /> harus ditulis dan berada
didalam tag <form> </form>.
Contoh:
<html>
<head>
<title>Form: Input Text Fields </title>
</head>
<body>
<form>
First Name: <input type="text" name="firstname" /> <br />
Last Name: <input type="text" name="lastname" />
</form>
</body>
</html>
Password Field
Password field adalah salah satu Type elemen input. Type ini mengubah teks yang ada didalam
kotak inputan menjadi tanda password dengan lambang bulatan hitam. Untuk membuat password
field, kita dapat mengunakan perintah: <input type=password />. Dan ingat! tag <input /> harus
ditulis dan berada didalam tag <form> </form>.
<html>
<head> <title>Form: Input Password Field </title> </head>
<body>
<form>
Password: <input type="password" name="password" />
</form>
</body>
</html>
55
Radio Button
Apa itu radio button? Radio button merupakan salah satu type elemen input yang mendefinisikan
input pilihan, seperti pada form yang memberikan pertanyaan: apakah jenis kelamin anda?
Pilihannya sudah pasti satu, yaitu perempuan atau laki-laki. Intinya, radio button hanya memilih 1
pilihan! Dan tidak bisa lebih!
Untuk membuat radio button, kita dapat menggunakan <input type=radio /> lengkapnya:
<input type=radio name=value value=value />
Contoh:
<html>
<head>
<title>Form: Input Radio Button </title>
</head>
<body>
<form>
Apakah jenis kelamin anda? <br />
<input type="radio" name="jeniskelamin" value="pria" /> Pria <br />
<input type="radio" name="jeniskelamin" value="wanita" /> Wanita
</form>
</body>
</html>
Value Attribute name= harus ditulis sama. Sedangkan Value untuk attribute value= ditulis
berbeda. Kenapa demikian? Karena untuk menentukan jenis kelamin, input radio button akan
memilih berdasarkan value dari attribute name=jeniskelamin, sedangkan untuk membedakan
jenis kelamin, radio button akan menentukan berdasarkan value pada attribute value=pria dan
value=wanita. Yang terpenting INTINYA value didalam attribute name= harus sama.
56
Checkbox
Checkbox merupakan salah satu type elemen input yang mendefinisikan input pilihan, Namun
checkbox memperbolehkan pilihan yang dipilih lebih dari 1 pilihan. Checkbox dapat dibuat dengan
perintah <input type=checkbox />.
<html>
<head>
<title>Form: Input Checkbox </title>
</head>
<body>
<form>
Apakah Hobi anda? <br />
<input type="checkbox" name="hobi" value="makan" /> Makan <br />
<input type="checkbox" name="hobi" value="tidur" /> Tidur <br />
<input type="checkbox" name="hobi" value="nongkrong" /> Nongkrong <br />
<input type="checkbox" name="hobi" value="menabung" /> Menabung
</form>
</body>
</html>
Submit & Reset Button

Submit button adalah tombol input yang digunakan untuk mengirimkan data inputan form,
sedangkan reset button adalah tombol yang digunakan untuk melakukan reset ulang (clear) pada
kotak-kotak input.
Submit button didefinisikan dengan tag <input type=submit value=submit />
Reset button didefinisikan dengan tag <input type=reset value=reset />
57
Contoh Submit dan Reset button:

<html>
<head>
<title>Form: Input Submit & Reset</title>
</head>
<body>
<form>
Email Anda:
<input type="text" name="email" /> <br />
<input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</form>
</body>
</html>
Element File
Elemen ini digunakan untuk membuat input upload. Biasanya elemen ini dipakai pada aplikasi
upload file, atau upload gambar. Elemen file didefinisikan menggunakan attribute type=file. Dan
agar elemen ini dapat bekerja, dibutuhkan attribute enctype dengan value multipart/form-data
pada tag <form>.
Contoh:
<html>
<head>
<title>Form: Input File Upload</title>
</head>
<body>
<form enctype=multipart/form-data>
<input type=file name=fileupload>
</form>
</body>
</html>
58
Element Textarea
Textarea memungkinkan kita untuk menginputkan text lebih dari satu baris. Textarea merupakan
text fields yang lebih besar. Textarea didefinisikan dengan tag <textarea> </textarea>.
Dan Ingat! tag ini harus berada didalam tag <form> </form>. Selain itu textarea memiliki
attribute, yaitu: rows=value dan cols=value. Attribute cols digunakan untuk mengatur lebar
textarea, sedangkan attribute rows digunakan untuk mengatur tinggi textarea. Value dari attribute
rows dan cols adalah angka. Dimulai dari angka 1 Unlimited.
Untuk mencobanya, mari kita ketikkan skrip dibawah ini. Simpan dengan nama textarea.html
Contoh:
<html>
<head>
<title>Form: Textarea</title>
</head>
<body>
<form>
<textarea rows="3" cols="30">ini isi textarea aku adalah anak gembala selalu riang serta gembira,
karena aku rajin bekerja :D
</textarea>
</form>
</body>
</html>
59
Element Select
Elemen select digunakan untuk mendefinisikan opsi pilihan dengan tampilan dropdown-list menu.
Elemen select menggunakan tag <select> dan </select>. Selain itu elemen ini memiliki beberapa
attribute diantaranya: name, size, dan multiple.
Element Option
Didalam Element Select terdapat lagi element option, yang fungsinya untuk mendefinisikan opsi
pilihan pada tag <select>. Element option memiliki attribute diantaranya: value dan selected.
Attribute selected digunakan untuk memilih secara default opsi pilihan yang telah ditentukan.
Elemen option sendiri didefinisikan menggunakan tag <option> </option>. Contoh penggunaan:
<html>
<head> <title>Form: Select</title> </head>
<body>
<form> Di Kota manakah anda berada: <br />
<select name=kota>
<option value=lampung> Lampung </option>
<option value=jakarta> Jakarta </option>
<option value=bandung> Bandung </option>
</select>
</form>
</body>
</html>
60
HTML Marquee
HTML Marquee memungkinkan kita untuk membuat animasi berjalan. Tag yang digunakan adalah
<marquee> dan </marquee>.
Contoh:
<html>
<head>
<title>HTML Marquee</title>
</head>
<body>
<marquee> Ini adalah teks berjalan </marquee>
</body>
</html>
BAB III HTML Tag Dan Attribute List

HTML TAG List
Sumber referensi: http://w3schools.com/tags/default.asp
Tag
Deskripsi
Basic
<!DOCTYPE />
Mendefinisikan dokumen Type
<html>
Mendefinisikan dokumen HTML
<head>
Mendefinisikan header dokumen HTML
<title>
Mendefinisikan judul dokumen HTML
<body>
Mendefinisikan untuk Isi dokumen HTML
<h1> to <h6>
<p>
Mendefinisikan Text Heading

Mendefinisikan Paragraf
<br />
Mendefinisikan Baris Baru (Line break)
<hr />
Mendefinisikan Garis Lurus

Mendefinisikan Komentar
61
Text Formatting
<acronym>
<b>
<big>
<blockquote>
<center>
Mendefinisikan Text Acronym

Mendefinisikan huruf tebal
Mendefinisikan Huruf lebih besar dari normal
Mendefinisikan Kutipan Panjang
Mendefinisikan Rata Tengah (alignment)
<del>
Mendefinisikan huruf garis tengah
<em>
Mendefinisikan huruf miring
<font>
Mendefinisikan Suatu font (huruf)
<i>
Mendefinisikan huruf miring
<ins>
Mendefinisikan huruf garis bawah
<pre>
Mendefinisikan preformatted text
<small>
Mendefinisikan huruf lebih kecil dari normal
<strike>
Mendefinisikan huruf garis tengah
<strong>
Mendefinisikan huruf tebal
<sub>
Mendefinisikan huruf subscript
<sup>
Mendefinisikan huruf superscript
<u>
Mendefinisikan huruf garis bawah
List
<ul>
Mendefinisikan Unordered List
<ol>
Mendefinisikan Ordered List
<li>
Mendefinisikan List Item
Table
<table>
Mendefinisikan suatu tabel
<caption>
Mendefinisikan judul tabel
<th>
Mendefinisikan heading cell
<tr>
Mendefinisikan baris cell
<td>
Mendefinisikan cell (kolom)
Images
<img />
Mendefinisikan tag gambar
Form
<form>
Mendefinisikan Suatu form
62
<input />
<textarea>
Mendefinisikan Input form

Mendefinisikan textarea
<button>
Mendefinisikan Suatu tombol
<select>
Mendefinisikan elemen select
<option>
Mendefinisikan pilihan dari elemen select
<label>
Mendefinisikan Label Input Form
<fieldset>
Mendefinisikan Border Form
<legend>
Mendefinisikan Caption (judul) dari fieldset
Meta Info
<meta>
Mendefinisikan suatu tag Meta pada HTML
Styles
<style>
Mendefinisikan suatu Style pada dokumen HTML
<div>
Mendefinisikan tag dinamis
<span>
Mendefinisikan tag dinamis
<marquee>
Mendefinisikan text animasi berjalan
Frames
<frame />
Mendefinisikan jendela frame didalam tag <frameset>
<frameset>
Mendefinisikan suatu frame
HTML Attribute List

Sumber referensi: http://w3schools.com/tags/ref_standardattributes.asp
Attribute Utama
Tidak dapat digunakan untuk element head, html, meta, script, style, dan title.
Attribute
Value
Deskripsi
class=value
Nama class
Mendefinisikan nama class untuk suatu element
id=value
Nama id
Mendefinisikan ID Unik untuk suatu element
style=value
Definisi style
Mendefinisikan penggunaan style didalam element
title=value
text
Mendefinisikan Informasi tentang element
63
Biografi Penulis
Lampung. Berpengalaman dibidang web design sejak tahun 2009 dan
sudah membuat berbagai macam karya website seperti Toko online,
web personal, sekolah, lembaga, web company profil, radio online,
dan program aplikasi berbasis website seperti Helpdesk Request System. Pendiri Miniw0rm
University, Miniw0rm CMS, dan Miniw0rm Inc. Selain itu Virgiawan Listanto merupakan penulis
muda yang telah menelurkan buku IT berjuul Cepat Mahir Pemrograman Web Dengan PHP dan
MySQL terbitan Prestasi Pustaka Raya. Kini buku keduanya yang berjudul Teknik Komputer Dan
Jaringan Untuk SMK/SMA/MA Dan Umum tinggal menunggu giliran terbit pada September nanti.
Salah satu karya terbaiknya yang telah diminati banyak programmer muda tanah air adalah
Miniw0rm CMS. Sebuah Content Management System yang ditulis dengan bahasa pemrograman
PHP dan menggunakan database MySQL, Miniw0rm CMS berlisensi open source artinya siapa saja
boleh memodifikasinya serta menggunakannya sesuai dengan keinginan pengguna masing-masing.
Miniw0rm CMS dibuat dengan model programming for future, artinya semua code yang ditulis
dengan pemrograman prosedural. Hal ini dilakukan supaya para programmer web yang baru
terjun didunia web design dapat mengexplorasikan dirinya dengan memodifikasi CMS ini sesuai
dengan gaya pemrograman yang diinginkan. Menguasai bahasa pemrograman dan bahasa
scripting berbasis website seperti: PHP, CSS, XHTML, Javascript, JQuery, Ajax, XML dan MySQL.
Contact Person
Lesson: 1 Web Introduction

Pengenalan Internet Dan Website
Oleh:
Virgiawan Listanto
Lisensi Dokumen:
Semua isi yang ada didalam buku ini bebas digunakan, dimodifikasi, dan
disebarkan secara bebas untuk tujuan bukan komersial. Dengan syarat
tidak menghapus atau mengubah attribute penulis dan copyright
Miniw0rm University tanpa sepengetahuan atau izin dari penulis.
Daftar Isi
Biografi Penulis
Lisensi Dokumen
Pendahuluan
Bab I Pengenalan Internet

Sejarah Internet
Koneksi Client-Server
IP Address
Prinsip Kerja Internet Protokol
DNS (Domain Name Sistem)
Cara Kerja DNS
URL (Uniform Resource Locator)
Web Browser
Web Server
Cara Kerja Web Server
Bab II Pengenalan Website

Sejarah Website
WWW (World Wide Web)
Pengertian Website
Jenis-jenis Website
Tipe-Tipe Website Dan Fungsinya
Teknologi Website
Pendahuluan
Hello guys! :D selamat datang didunia web master. Mulai dari buku ini kita semua akan
mempelajari segala hal yang berkaitan dengan dunia web design. Jangan tegang dong, ambil
secangkir kopi hangat, putar lagu-lagu kesayangan kalian, lalu mari belajar dengan santai.
Pada zaman yang semakin maju ini, kita ketahui perkembangan teknologi diseluruh dunia sudah
sangat meningkat pesat. Salah satu dari ribuan teknologi yang membooming didunia adalah
Internet dan website. Kecanggihan google.com dan yahoo.com menyaring ribuan website yang
ada diinternet, menjadi saksi bisu perkembangan teknologi dan aplikasi website didunia maya.
Beralih ke social networking, facebook.com, twitter.com, dan yang baru-baru ini muncul yaitu
Google Plus mulai mendominasi tingkat perkembangan aplikasi website di internet. Terlepas dari
itu semua apakah kalian pernah berfikir, bagaimana ya caranya membuat website seperti
google.com, yahoo.com, facebook.com, twitter.com, atau miniw0rm.cz.cc hehe :D
Jika kalian pernah berfikir seperti itu, berarti selamat! Karena separuh dari isi otak kalian berniat
untuk maju. Karena mengetahui sesuatu hal yang belum pernah diketahui adalah sebuah ide yang
akan memacu adrenalin kalian untuk belajar lebih maju. Sedikit curhat: Kalau saya dulu waktu
pertama kali masuk SMK tepatnya kelas 1, yang namanya main game malah jarang dilakukan.
Malahan saya mempunyai pikiran seperti ini: Gimana ya caranya buat game, terus sampe bisa
dimainin banyak orang gitu? hahaha pemikiran yang aneh kan untuk bocah kelas 1 SMK :D
Tapi tidak lama setelah pemikiran itu muncul hasrat bermain game saya malah bertambah, tiap
hari saya main game yang namanya EMPIRES hampir 4 jam dalam 1 hari setelah pulang sekolah.
Dan ketika saya tertarik untuk terus bermain game itu, pemikiran yang sama muncul lagi. eh, kok
bisa ya.. kita mencet tombol ini terus keluar gambar ini dimonitor? Eh Terus kok bisa ya, kita klik
kanan mouse orang yang ada digame itu jalan sendiri, dan bla bla bla
Hei hei hei, Stop curhatnya om! Ini bukan tempat untuk diskusi game. Haha :D
Tapi ada benarnya juga saya bercerita seperti itu, karena secara tidak langsung para pembaca yang
sedang membaca buku ini juga ikut berfikir seperti itu bukan? Itulah yang dinamakan teknik
berinteraksi dengan pembaca, dan dengan teknik ini juga penulis akan mengajak kalian semua
untuk berinteraksi dengan pemrograman website, design website, dan masih banyak lagi.
Mulai Dari Mana Saya Harus Mempelajari Ini Semua?

Hmm.. pertanyaan yang sudah sering saya jumpai ditoko besi terdekat, dan untuk menjawab
pertanyaan ini saya akan bilang: Pelajarilah dari yang dasar. Yap! Tentu semua guru akan berkata
demikian jika mendapati murid baru, atau siswa baru disekolahnya.
Lalu Apa Dasarnya?

Dasar-dasar untuk mempelajari semua hal yang berkaitan dengan website adalah:
1. Mengenal seluk beluk internet
2. Mengenal seluk beluk website
3. Mengenal konsep desain website
4. Mengenal teknologi website
5. Mengenal pemrograman website
6. Mengenal berbagai macam aplikasi yang dibutuhkan website
7. Dan terakhir mengikuti perkembangan website
What?? Cuma segitu doang? Hei.. hei.. hei.. itu cuma separuhnya saja, sisanya bakal kita bahas
pada buku-buku selanjutnya. Jadi harap bersabar yak :D
Oke kini saatnya kita terjun kemateri yang lebih serius. Are you ready?
BAB I Pengenalan Internet

Internet merupakan kependekan dari (interconnected-networking) yaitu sebuah sistem global
(jaringan raksasa) dari seluruh jaringan komputer yang saling terhubung menggunakan standar
Internet Protocol (TCP/IP) untuk melayani miliaran pengguna diseluruh dunia. Apa itu protokol?
Protokol adalah suatu cara yang digunakan untuk menghubungkan antar jaringan komputer.
Sedangkan TCP/IP merupakan kependekan dari Transmission Control Protocol/Internet Protocol. TCP/IP
adalah standar komunikasi data yang digunakan untuk proses tukar menukar data dari satu komputer ke
komputer lain dalam jaringan Internet.
Ingat! TCP/IP adalah protokol standar komunikasi untuk melakukan proses tukar menukar data
antar komputer satu dengan komputer lain dalam jaringan internet. Jadi dapat kita simpulkan
bahwa TCP/IP merupakan sebuah Protokol atau sebuah CARA. Tanpa adanya protokol, jaringan
komputer tidak akan pernah berjalan
Back to topick, Selain itu Internet juga dapat berfungsi sebagai media informasi atau sarana
komunikasi data berupa suara, gambar, video dan teks. Situs-situs jejaring sosial seperti: facebook,
twitter, google plus dan sebagainya menjadi salah satu alasan mengapa internet jaman sekarang
semakin membesar dan populer. Kebutuhan pengguna internet akan aplikasi website seperti
chatting, teleconference, berita online, transaksi online, dan sharing data secara online juga
menjadi salah satu alasan mengapa pengguna internet didunia membludak setiap harinya.
Bayangkan saja, pengguna internet jaman sekarang kalau tidak apdet status baik itu difacebook,
twitter, atau google plus pasti akan terasa hambar, aneh, dan membosankan. Termasuk penulis,
penulis juga begitu, kalau sehari saja tidak apdet status pasti rasanya ada yang kurang. Hehe :D
Maka dari itu para web developer, web designer, dan web programmer didunia maya makin
sejahtera kelangsungan hidupnya. Memang benar-benar menggiurkan profesi ini, coba saja kita
analogikan: Jika para programmer, desainer, dan pengembang website mendapat permintaan
tender proyek website, aplikasi website, atau desain website dalam 1 harinya, maka berapa
banyak gaji yang mereka raih?
Tentu banyak sekali bukan! Mengingat sudah banyak milyaran pengguna internet yang
menuntut para web master untuk membangun aplikasi-aplikasi website terbaru sesuai dengan
kemajuan jaman.
Sejarah Internet
Diambil dari situs Wikipedia.org. Sejarah Internet pertama kali dimulai pada tahun 1969 ketika
Departemen Pertahanan Amerika, U.S. Defense Advanced Research Projects Agency (DARPA)
memutuskan untuk mengadakan riset tentang bagaimana caranya menghubungkan sejumlah
komputer sehingga membentuk jaringan organik. Program riset ini dikenal dengan nama
ARPANET.
Pada tahun 1970, sudah lebih dari 10 komputer yang berhasil dihubungkan satu sama lain,
sehingga mereka dapat saling berkomunikasi dan membentuk sebuah jaringan. Tahun 1972, Roy
Tomlinson berhasil menyempurnakan program email yang ia ciptakan setahun yang lalu untuk
ARPANET. Program email ini begitu mudah, sehingga langsung menjadi populer.
Pada tahun yang sama, icon @ juga diperkenalkan sebagai lambang penting yang menunjukan at
atau pada. Kemudian pada tahun 1973, jaringan komputer ARPANET mulai dikembangkan
meluas ke luar Amerika Serikat. Komputer University College di London merupakan komputer
pertama diluar Amerika yang menjadi anggota jaringan Arpanet.
Pada tahun yang sama juga, dua orang ahli komputer yaitu Vinton Cerf dan Bob Kahn
mempresentasikan sebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran
International Network (Internet). Ide ini dipresentasikan untuk pertama kalinya di Universitas
Sussex. Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil
mengirimkan email dari Royal Signals and Radar Establishment di Malvern. Setahun kemudian,
sudah lebih dari 100 komputer yang bergabung di ARPANET membentuk sebuah jaringan atau
network. Pada tahun 1979, Tom Truscott, Jim Ellis dan Steve Bellovin, menciptakan newsgroups
pertama yang diberi nama USENET.
Tahun 1981, France Telecom menciptakan gebrakan dengan meluncurkan telpon televisi pertama,
dimana orang bisa saling menelpon sambil berhubungan dengan video link. Karena komputer yang
membentuk jaringan semakin hari semakin banyak, maka dibutuhkan sebuah protokol resmi yang
diakui oleh semua jaringan.
Pada tahun 1982, dibentuklah Transmission Control Protocol atau TCP dan IP yang kini kita kenal
dengan sebutan TCP/IP. Sementara diEropa, muncul jaringan komputer tandingan yang dikenal
dengan nama Eunet. Eunet menyediakan jasa jaringan komputer dinegara-negara Belanda, Inggris,
Denmark dan Swedia. Jaringan Eunet juga menyediakan jasa email dan newsgroup USENET. Untuk
menyeragamkan alamat dijaringan komputer yang ada, maka pada tahun 1984 diperkenalkan
domain name system, yang kini kita kenal dengan nama DNS.
Pada 1987 jumlah komputer yang tersambung ke jaringan melonjak 10 kali lipat menjadi 10.000
lebih. Tahun 1988, Jarko Oikarinen dari Finland menemukan dan sekaligus memperkenalkan IRC
(Internet Relay Chat). Setahun kemudian, jumlah komputer yang saling berhubungan kembali
melonjak 10 kali lipat dalam setahun. Tak kurang dari 100.000 komputer pada saat itu membentuk
sebuah jaringan. Tahun 1990 adalah tahun yang paling bersejarah, ketika Tim Berners Lee
menemukan program editor dan browser yang bisa menjelajah antara satu komputer dengan
komputer lain yang membentuk jaringan itu.
Program inilah yang disebut dengan www atau World Wide Web. Tahun 1992, komputer yang
saling tersambung membentuk jaringan sudah melampaui satu juta komputer, dan ditahun yang
sama muncul istilah surfing (menjelajah). Dua tahun berikutnya 1994, situs-situs dunia maya telah
tumbuh menjadi 3.000 alamat halaman dan untuk pertama kalinya virtual-shopping/e-retail
muncul disitus. Dunia langsung berubah. Ditahun yang sama juga Yahoo! Didirikan, yang juga
sekaligus tahun kelahiran Netscape Navigator 1.0.
Koneksi Client-Server
Client-Server merupakan suatu koneksi dimana harus ada satu komputer yang khusus dijadikan
server dari komputer lain yang berfungsi sebagai client. Apa itu Server? Apa itu Client? Server
adalah sebuah komputer yang bertugas untuk memberikan layanan kepada Client, sedangkan
Client adalah komputer yang bertugas untuk meminta layanan kepada Server.
Analoginya seperti konsep jual beli diwarung, misalkan ada seorang pembeli yang datang untuk
membeli bahan-bahan kebutuhan sehari-hari seperti: beras, mie instan, gula, kopi, dll. Setelah itu,
si penjual akan datang untuk menanyakan apa yang akan diminta oleh sang pembeli. Jika sang
penjual sudah tau apa yang diminta oleh si pembeli, maka penjual tinggal memberikan layanannya
yaitu bahan-bahan yang diperlukan. Konsep seperti itulah koneksi Client-Server terjadi, penjual
dapat kita jadikan sebagai server, dan pembeli dapat kita jadikan sebagai Client. Server yang
memberi layanan dan Client yang meminta layanan.
Ilustrasi Koneksi Client-Server
IP Address
Dalam dunia internet kita tidak akan pernah luput dari yang namanya IP Address. Apa itu IP
Address? IP merupakan kependekan dari Internet Protokol. Internet Protokol adalah sebuah
alamat unik yang diberikan pada setiap komputer yang tersambung kedalam jaringan. IP address
kini memiliki dua versi, versi yang pertama adalah IPv4 dan versi yang kedua adalah IPv6. IP
Address (Alamat IP) merupakan deretan angka biner antara 32-bit sampai 128-bit yang dipakai
sebagai alamat identifikasi unik untuk setiap komputer dalam jaringan Internet.
10
Panjang alamat IP adalah 32-bit untuk IP versi 4 (IPv4), dan 128-bit untuk IP versi 6 (IPv6), yang
menunjukkan alamat dari komputer tersebut pada jaringan Internet berbasis TCP/IP. Contoh:
192.168.202.22 merupakan alamat IP. Untuk mengidentifikasi suatu host pada internet, maka tiap
host diberi IP address, atau internet address. Host disini dapat disebut sebagai komputer yang
tersambung kedalam jaringan. Apabila host tersebut tersambung lebih dari 1 jaringan maka
disebut dengan multi-homed, dimana multi-homed memiliki 1 IP address untuk masing-masing
interface.
Prinsip Kerja Internet Protokol

Fungsi dari Internet Protocol secara sederhana dapat diterangkan seperti cara kerja kantor pos
pada proses pengiriman surat. Pertama-tama surat kita masukan ke dalam kotak pos, setelah itu
petugas pos akan mengambil surat tersebut, kemudian surat tersebut akan dikirimkan melalui
route (jalur) yang random, tanpa si pengirim maupun si penerima surat mengetahui jalur
perjalanan surat tersebut. Contoh lain misalnya ketika kita mengirimkan dua surat yang ditujukan
pada alamat yang sama pada hari yang sama, belum tentu surat tersebut akan sampai bersamaan,
karena ada kemungkinam surat yang satu akan mengambil route yang berbeda dengan surat yang
lain. Di samping itu, tidak ada jaminan bahwa surat akan sampai ditangan tujuan, kecuali jika kita
mengirimkannya menggunakan surat tercatat.
Prinsip pengiriman surat diatas digunakan oleh Internet Protocol, surat diatas dikenal dengan
sebutan datagram. Internet Protocol berfungsi menyampaikan datagram dari satu komputer ke
komputer lain, tanpa tergantung pada media komunikasi yang digunakan. Data transport layer
dipotong menjadi datagram-datagram yang dapat dibawa oleh IP. Tiap datagram dilepas dalam
jaringan komputer, dan akan mencari sendiri secara otomatis rute yang harus ditempuh ke
komputer tujuan.
Untuk membantu mencapai komputer tujuan, setiap komputer dalam jaringan TCP/IP harus
diberikan IP address. IP address harus unik untuk setiap komputer. IP address terdiri atas 8 bit
data yang mempunyai nilai dari 0 sampai 255 dan sering ditulis dalam bentuk [xxx.xxx.xxx.xxx].
11
Khususnya untuk pengguna jaringan komputer, hal ini sangat penting untuk dipahami secara
benar-benar dalam konsep IP address. Lembaga yang mengatur IP address adalah Network
Information Center (NIC) di Department of Defence di US yang beralamat di http://www.nic.mil.
Pengaturan IP address penting, terutama pada saat mengatur routing secara otomatis.
Tentunya sukar bagi manusia untuk mengingat banyak sekali IP address. Maka dari itu untuk
memudahkannya, dikembangkanlah Domain Name System (DNS). Sebagai contoh: komputer Virgi
berada di server SMK Negeri 3 Metro dengan IP address 44.135.84.22, dan saya beri nama:
virgi.smkn3metro.sch.id. Terlihat bahwa hostname (hostname adalah nama komputer yang ada
pada jaringan) yang digunakan Virgi sangat spesifik dan sangat mudah untuk diketahui bahwa Virgi
berada didalam server SMK Negeri 3 Metro yang terlihat dari kata smkn3metro.sch.id.

DNS (Domain Name Sistem) adalah suatu bentuk database yang terdistribusi, dimana pengelolaan
secara lokal terhadap suatu data akan segera diteruskan ke seluruh jaringan (internet) dengan
menggunakan skema koneksi client-server. DNS biasa disebut dengan nama domain untuk
jaringan. Suatu program yang dinamakan name server, mengandung semua informasi dari
database dan juga merupakan resolver bagi client-client yang menggunakannya.
Struktur dari database DNS bisa diibaratkan dengan struktur file dari sebuah sistem operasi UNIX.
Seluruh database digambarkan sebagai sebuah struktur terbalik dari sebuah pohon (tree) dimana
pada puncaknya disebut dengan root node. Pada setiap node dalam tree tersebut mempunyai
keterangan (label) misalnya, .org, .com, .edu, .net, .id dan lain-lainnya, yang relatif rerhadap
puncaknya (parent).Ini bisa diibaratkan dengan relative pathname pada sistem file UNIX,seperti
direktori bin, usr, var, etc dan lain sebagainya. Pada puncak root node dalam sebuah sistem DNS
dinotasikan dengan "." atau "/" pada sistem file UNIX.
12
Cara Kerja DNS

Ketika kita melakukan query (bisa berupa ping, ssh, dig, host, nslookup, email, dll) ke sebuah host
misalnya virgi.tkj.smkn3metro.sch.id maka name server akan memeriksa terlebih dahulu apakah
ada record host tersebut dicache name server lokal. Jika tidak ada, maka name serverlokal akan
melakukan query kepada root server dan mereferensikan name server untuk TLD .sch.id. Setelah
itu name server lokal kembali melakukan query kepada name server .sch.id dengan jenis query
yang sama dan mereferensikan smkn3metro.sch.id. Name server lokal kembali melakukan query
ke name server smkn3metro.sch.id dan mereferensikan query selanjutnya ke name server lokal
yaitu tkj.smkn3metro.sch.id. Kemudian name server lokal melakukan query kepada name server
lokal tkj.smkn3metro.sch.id dan akhirnya mendapatkan jawaban address yang diminta. Penamaan
host virgi.tkj.smkn3metro.sch.id mungkin bisa diartikan dengan nama sebuah komputer (virgi)
pada jurusan Teknik Komputer Dan Jaringan (tkj) pada Sekolah Menengah Kejuruan Negeri 3
Metro (smkn3metro.sch.id).
Sumber Referensi:
http://kambing.ui.ac.id/bebas/v17/org/vlsm/asfik/writings/dns-bind.html
URL (Uniform Resource Locator)

Setiap komputer yang terhubung ke Internet dapat didaftarkan untuk memiliki nama domain yang
disebut dengan hostname. Hostname yang lengkap disebut Fully Qualified Domain Name (FQDN).
Contoh FQDN: www.google.com. Untuk mengakses informasi yang disediakan oleh suatu
komputer diInternet, diperlukan alamat URL (Uniform Resource Locator).
Contoh URL: http://www.virgiganteng.com

http:// (HyperText Transfer Protocol) adalah protokol yang digunakan untuk mentransfer dokumen
HTML dalam World Wide Web (WWW). Protokol HTTP adalah protokol ringan, tidak berstatus dan
generik yang dapat digunakan diberbagai macam tipe dokumen. Protokol ini juga merupakan protokol
yang saat ini selalu kita pakai untuk melakukan browsing website.
www.virgiganteng.com adalah nama domain (hostname) yang mendefinisikan alamat website.
13
Web Browser
Apa itu web browser? Masa nggak tau sih, orang tiap hari dipake buat facebookan kok :D hehe..
Web browser adalah suatu aplikasi yang wajib digunakan untuk melakukan aktifitas browsing
website. Contoh web browser yang sering kita gunakan adalah: Mozzila Firefox, Internet Explorer,
Opera, Google Chrome, dan masih banyak lagi. Tanpa kehadiran web browser tentu sampai saat
ini kita tidak dapat melakukan aktifitas surfing di internet.
Web Server
Apa itu web server? Web server merupakan sebuah perangkat lunak server yang berfungsi untuk
menerima permintaan HTTP atau HTTPS dari Web Browser. Kemudian web server akan
mengirimkan kembali hasilnya dalam bentuk halaman-halaman website yang umumnya berbentuk
dokumen HTML. Web Server yang sudah sangat terkenal diantaranya adalah Apache dan
Microsoft Internet Information Service (IIS). Apache merupakan web server antar-platform,
Apache sering digunakan didalam sistem operasi Linux. sedangkan IIS hanya dapat beroperasi di
sistem operasi Windows.
Cara Kerja Web Server

Cara kerja web server sangat sederhana, karena pada dasarnya web server hanya memiliki 2 tugas
yaitu: Menerima permintaan dari client (request), dan Mengirimkan apa yang diminta client
(respon). Client disini dapat berupa komputer desktop yang minimal memiliki web browser seperti
(mozzila firefox, internet explorer, dll) dan terhubung ke web server melalui jaringan internet.
Agar komputer yang berfungsi sebagai server dapat diakses oleh client, maka komputer server
harus terhubung ke jaringan internet atau intranet. Dalam jaringan internet, komputer server
dapat dicontohkan seperti google.com, facebook.com, dan lain-lain.
Cara kerjanya, Pertama-tama client (komputer pengguna) akan meminta suatu halaman website
ke web server untuk ditampilkan di komputer client. Misalkan client mengetikkan suatu alamat
(URL) dibrowser http://www.google.com. Dan setelah client menekan tombol Enter atau menekan
tombol klik Go pada web browser apa yang akan terjadi?
14
Melalui melalui protokol HTTP maka akan dilakukan proses pencariaN komputer bernama
www.google.com. Jika ditemukan, maka seolah-olah terjadi permintaan, hai google, ada client
yang minta halaman utama nih, ada dimana ya halamannya?. Inilah yang disebut request.
Sekarang dari sisi server, Web Server mendapat permintaan halaman utama google dari client,
kemudian server akan mencari didalam komputernya tentang halaman website yang sesuai
dengan permintaan. Namanya juga mencari, kadang ketemu, kadang juga tidak ketemu. Jika
ditemukan, maka halaman yang diminta akan dikirimkan ke client, namun jika tidak ditemukan,
maka server akan memberi pesan 404. Page Not Found, yang artinya halaman tidak ditemukan.
Cara kerja internet juga sama dengan cara kerja web server. Komputer yang ada di internet ya
itulah yang namanya web server. Sedangkan komputer yang ada dikamar kita, atau diwarnet, itu
namanya komputer client (komputer yang meminta request halaman website kepada server)
Untuk bacaan referensi kalian bisa mengunjungi alamat yang tertera dibawah ini:
http://id.wikipedia.org/wiki/Server_web
http://achmatim.net/2008/07/09/prinsip-dan-cara-kerja-web-server/
15
BAB II - Pengenalan Website

Sekarang kita telah sampai pada bab terakhir yaitu pengenalan website. Mulai dari bab inilah kita
semua akan mengerti dan memahami seluk beluk website itu seperti apa. Oke, ngopi dulu masbro!
Biar otaknya nggak puyeng baca tulisan ane wakkakakakak :))
Sejarah Website
Sejarah Website bermula di European Laboratory for Particle Physics (yang lebih dikenal dengan
nama CERN) dikota Geneva dekat perbatasan Perancis dan Swiss. CERN merupakan suatu
organisasi yang didirikan oleh 18 negara di Eropa. Dibulan Maret 1989, Tim Berners dan peneliti
lainnya dari CERN mengusulkan suatu protokol distribusi informasi diInternet yang memungkinkan
para anggotanya yang tersebar diseluruh dunia dapat saling membagi informasi dan bahkan dapat
menampilkan informasi tersebut dalam bentuk grafik.
Web Browser pertama dibuat berbasiskan teks. Untuk menyatakan suatu link (tautan), dibuat
sebarisan nomor yang mirip dengan suatu menu. Pemakai dapat mengetikkan suatu nomor untuk
melakukan navigasi didalam Web. Kebanyakan software tersebut dibuat untuk komputer yang
menggunakan Sistem Operasi UNIX, dan belum banyak yang bisa dilakukan oleh pemakai
komputer yang saat itu menggunakan Windows. Tetapi semua ini berubah setelah munculnya
browser Mosaic dari NCSA (National Center for Supercomputing Applications).
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat Web browser untuk
sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa
bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di
Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis
UNIX, NeXT, Windows dan Macintosh.
Pada tahun 1994, Marc Andreesen meninggalkan NCSA, kemudian bersama Jim Clark, salah satu
pendiri dari Silicon Graphics, membuat browser Netscape versi pertama. Kehadiran Netscape ini
menggantikan kepopuleran Mosaic sebagai Web browser dan bahkan sampai saat ini Netscape
merupakan browser yang banyak digunakan setelah Internet Explorer dari Microsoft.
16
Pada tahun yang sama CERN dan MIT mendirikan suatu konsorsium yang dinamakan World WIde
Web Consortium (W3C) yang bertugas untuk membangun standar bagi teknologi Website. Pada
awal perkembangannya, saat browser masih berbasiskan teks, hanya terdapat sekitar 50 website.
Di akhir tahun 1995 jumlah ini telah berkembang mencapai sekitar 300.000 web site. Dan
diperkirakan sekarang ini jumalh pemakai Website telah mencapat sekitar 30 juta pemakai
diseluruh dunia.
WWW (World Wide Web)

WWW tentu tidak asing lagi ditelinga kita, 3 huruf keramat ini sekarang sudah banyak
diperbincangkan diberbagai belahan dunia. Termasuk di OVJ (Opera Van Java), sering denger kan
andre taulani bilang: kunjungi twitter kami di www.weeeeeeee hahaha :D
WWW (World Wide Web) terdiri dari jutaan web site dan setiap web site yang ada memiliki
banyak halaman web. Halaman-halaman web ini tersebar diseluruh dunia pada komputer server
yang terhubung dengan Internet. Situs-situs seperti: www.yahoo.com atau www.microsoft.com
adalah web site yang sudah lama ada dan menyediakan banyak sekali fasilitas sehingga halaman
dalam situs ini juga sangat banyak.
Ingat! WWW adalah salah satu dari sekian banyak layanan yang ada diinternet. Layanan ini paling
banyak digunakan untuk menyampaikan informasi, karena sifatnya mendukung multimedia.
Artinya informasi tidak hanya dapat disampaikan melalui teks, tapi juga gambar, video atau suara.
Pengertian Website
Yaelah, tadi kan udah dijelasin sob, masa dijelasin lagi -_- hehe :D ya gpplah biar jelas dan tuntas!
Apa itu Website? Website adalah sekumpulan halaman-halaman web yang berfungsi sebagai
media informasi dan komunikasi diinternet. Website biasanya terangkum dalam sebuah domain
atau subdomain yang berada didalam web server. Kehadiran website saat ini sudah semakin
merajalela, belum lagi saat blogger membooming, jumlah website yang ada di internet pasti sudah
lebih dari 1 trilyunan.
17
Sebuah halaman website umumnya dibuat menggunakan bahasa scripting/bahasa pengcodean

HTML (Hyper Text Markup Language) yang berjalan disisi client dan ditampilkan oleh browser
melalui protokol HTTP (Hyper Text Transfer Protocol). Loh!! PHP Juga dong! PHP ya bukanlah, PHP
kan bahasa pemrograman web yang berjalan disisi server. Gini-gini, PHP itu tugasnya Cuma
sebagai bahasa pemrograman yang digunakan untuk berinteraksi dengan server. Jadi nggak
mungkin PHP itu ditampilkan dibrowser, kalau script php kita bisa ditampilkan dibrowser waaahh
bisa amblas dianiaya hacker nanti wkwkkwk.. eh kok hacker, cracker deng :D
Masih belom mudeng juga? Hmm.. gini aja deh. PHP itu memang penting untuk membangun
sebuah aplikasi website, tapi Code-code PHP yang kita tulis, misalnya dihalaman index.php
nantinya pada saat dijalankan dibrowser tidak akan kelihatan source codenya. Istilahnya udah
kesaring.
Ingat! Jadi intinya, HTML bukanlah bahasa pemrograman! Namun bahasa markup. Sedangkan
PHP adalah bahasa pemrograman yang dapat berinteraksi dengan server. Beda kan bahasa
scripting dan pemrograman? Ya beda lah ! namanya aja beda!
Jenis-Jenis Website
Website umumnya memiliki dua jenis, antara lain:
Website Statis
Website statis adalah sebuah halaman website yang hanya bisa diakses oleh pengunjung.
Artinya website dengan jenis itu tidak dapat melakukan interaksi antara pengguna disisi client
dengan server. Website statis tidak dapat diupdate, karena memang tidak diberikan fasilitas
pendukung seperti yang terdapat pada website dinamis (Content Management System). Website
jenis ini biasanya berisi company profil, website undangan pernikahan (wedding), dan website
brosur online.
Keuntungan membangun website statis adalah tidak akan ada yang bisa merusak. Jika memang
bisa, maka saya yakin sang attacker pasti akan menggunakan teknik yang disebut dengan
JUMPING, La kok bisa! Ya bisa lah, wong Cuma dokumen HTML doang kok wkkwkwkw :D
18
Kerugiannya adalah tidak dapat mengupdate/memperbarui isi content website, seperti berita,
informasi terbaru, dan lain sebagainya. Juga akan menyulitkan, jika ada perbaikan/perubahaan
desain website. Sang web master pasti akan bolak balik CPANEL untuk melakukan editing.
Website Dinamis
Website dinamis adalah Jenis website yang memiliki umpan balik kepada client. Contoh website
dinamis antara lain seperti: facebook.com. Facebook memperbolehkan penggunanya untuk
melakukan interaksi kepada web server atau melakukan umpan balik. Seperti update status,
komentar, like, tag foto, upload foto ke server, dan masih banyak lagi. Dengan website bertipe
dinamis juga pengguna internet dapat berkomunikasi dengan pengguna internet lain didalam
halaman website yang memiliki umpan balik/back-end (interaksi) pada website berjenis dinamis
tersebut.
Website dinamis biasanya disebut dengan CMS (Content Management System), CMS adalah
sebuah sistem yang dapat melakukan query update data, delete data, pencarian data dan tambah
data pada website yang memiliki database. CMS umumnya ditulis menggunakan bahasa
pemrograman berbasis website seperti PHP, dan umumnya juga menggunakan basis data
(database) bernama MySQL. Contoh CMS yang sudah membooming di internet antara lain:
wordpress, blogger, drupal, joomla, zen cart, MyBB, PHPBB, Vbulletin, dan masih banyak lagi.
Tipe-Tipe Website Dan Fungsinya

Website memiliki banyak sekali tipe dan fungsi, disini penulis akan menjelaskan beberapa tipe
website yang perlu untuk diketahui. Tipe website dapat juga diartikan sebagai kategori website.
Web Personal (Pribadi)

Website personal memang memungkinkan untuk dibuat dengan jenis website statis, namun
terkadang para pemilik website pribadi menginginkan websitenya untuk selalu diupdate dan diedit
sesuai dengan kebutuhan. Oleh karena itu jenis website dinamis menjadi prioritas utama website
mereka. Website pribadi umumnya berfungsi sebagai website kehidupan sehari-hari, catatan kecil,
biografi, atau bahkan sebagai media sharing tutorial.
19
Website personal dapat dibuat secara praktis menggunakan CMS (Content Management System)
seperti joomla, drupal, wordpress, blogger, dll. Namun terkadang, ada juga pengguna internet
yang sistem websitenya dibuat dengan tangan sendiri menggunakan bahasa pemrograman PHP
dan database MySQL hingga membentuk suatu Content Management System.
Contoh Web Personal (Pribadi)
Web Company Profile

Website company profile adalah kategori website yang biasanya berisi profil dari suatu
perusahaan. Dengan adanya web company, para perusahaan kini tidak perlu repot-repot menebar
brosur disetiap jalan untuk mendapatkan pangsa pasar pada produk-produk yang mereka miliki.
Client yang ingin mengetahui produk/jasa yang dimiliki oleh perusahaan kini tinggal melakukan
akses website ke alamat domain perusahaan contohnya: http://merahputihnetworks.com.
20
Selain sebagai sarana untuk memasarkan produk, web company profile juga dapat menambah
citra perusahaan. Bayangkan saja, jika anda memiliki perusahaan didaearh glodok misalnya,
kemudian ada perusahaan lain yang berdekatan serta bekerja dibidang yang sama. Otomatis
merasa gengsi dan tersaingi bukan? Maka dari itu, jika perusahaan anda memiliki website dan
perusahaan saingan anda tidak memiliki website otomatis perusahaan andalah yang terlihat
tampak unggul.
Contoh Web Company Profile (Perusahaan)
Web News (Berita Online)

Website berita biasanya berfungsi sebagai media informasi online yang selalu up to date
mengikuti perkembangan berita atau kejadian yang sedang terjadi dan sedang hangat-hangatnya
diperbincangkan. Baik itu berita didunia maya atau didunia nyata, didalam negeri atau diluar
negeri. Website berita online sebenarnya merupakan pengganti dari Koran, dengan adanya berita
online, kita dapat mengakses informasi begitu cepat dan tak terbatas oleh ruang dan waktu.
Contoh website berita online yang terkenal antara lain: detik.com, kompas.com, okezone.com.
dan masih banyak lagi. Selain itu tidak hanya menyediakan informasi saja, namun web news
(berita online) dapat menjadi ladang uang bagi pemiliknya, mengapa demikian?
21
Ya bayangkan saja, jika mereka memiliki website berita, otomatis pasti ada walaupun hanya 1 yang
memasang iklan. Yap, website berita online memang sama persis dengan Koran. Website berita
online juga tidak menutup kemungkinan untuk menjadi tempat hiburan, tempat pencari kerja,
pemasangan iklan, sumber informasi yang uptodate, dan tempat untuk mencari berbagai macam
tips dan trik.
Contoh Web News (Berita Online)
22
Web Social Networking

Website social networking (jejaring sosial) adalah tipe website yang berfungsi sebagai media
pertemanan online, chatting online, sosialisasi online, komunikasi online, dan tempat sharing foto,
video, text, atau suara secara bersama-sama dan lain sebagainya. Contoh website social
networking antara lain: facebook.com, twitter.com, plus.google.com, dan lain-lain.
Contoh Web Social Networking
23
Web Forum (Foum Diskusi Online)

Forum diskusi online biasanya dikhususkan untuk tempat berkumpul dan saling berbagi,
berdiskusi, dan memecahkan suatu masalah secara bersama-sama. Biasanya untuk dapat
melakukan aktifitas diskusi secara bersama-sama, para pengunjung yang baru datang
diperkenankan untuk mendaftarkan diri terlebih dahulu sebagai anggota melalui form
pendaftaran. Setelah calon anggota mengisi formulir pendaftaran, maka program secara otomatis
akan mengirimkan informasi yang berisi pesan sukses tentang terdaftarnya anda sebagai calon
anggota, verifikasi login dan account login ke email anda.
Contoh Web Forum Diskusi Online

24
Web E-Commerce
E-Commerce atau yang biasa disebut Electronic Commerce merupakan tipe website yang
berfungsi sebagai media transaksi online. Umumnya tipe website jenis ini adalah website-website
yang menjual produk secara online. Biasanya website e-commerce memiliki aplikasi keranjang
belanja (shopping cart) yang berfungsi untuk memudahkan pembeli dalam berbelanja. Namun,
terkadang ada juga website e-commerce yang hanya berisi katalog online dan lengkap dengan
penjelasan detail serta harga-harga produk. Kemudian untuk melakukan transaksi, website ecommerce yang hanya berisi katalog online biasanya akan menggunakan metode transaksi
pembelian melalui email atau telpon. Contoh website e-commerce: amazon.com, goodady.com,
smallbusiness.yahoo.com dll.
Contoh Web E-Commerce

25
Web Search Engine

Tipe website berjenis ini biasanya berfungsi sebagai website yang menyediakan layanan pencarian
terhadap situs-situs yang sudah terindex didalam database search engine. Contoh website mesin
pencari antara lain: google.com, yahoo.com, bing.com, dan lain-lain.
Contoh Web Search Engine
26
Web E-Government
E-Government (Electronic Government) adalah tipe website yang biasanya dikhususkan untuk
situs-situs pemerintahan seperti: lembaga pemerintah, hukum, kedutaan asing, politik, militer,
organisasi perwakilan kota, dan lain-lain.
Web Reference
Situs referensi (web reference) biasanya dikhususkan sebagai sumber informasi atau bacaan
terpercaya seperti: ensiklopedia, kamus, sejarah, museum, peta, dan lain-lain.
Web Pendidikan
Situs pendidikan biasanya berfungsi sebagai media belajar, training atau pelatihan, asosiasi
mahasiswa, sekolah menengah atau universitas.
Web Blog
Web Blog merupakan tipe website yang dapat difungsikan sebagai catatan sehari-hari, diary,
biografi, pengalaman hidup, dan lain-lain. Selain itu situs blogging menjadi fenomena tersendiri
bagi kemajuan internet dunia. Dengan adanya layanan pembuatan blog secara instan pengguna
internet kini dapat melakukan aktifitas blogging kapanpun dan dimanapun. Web blog merupakan
suatu Content Management System yang dapat melakukan pencarian data, update data, delete
data, dan tambah data pada database. Contoh: wordpress.com dan blogger.com
Web E-Community
E-Community atau Electronic Community adalah tipe website yang dikhususkan untuk komunitaskomunitas tertentu yang bertujuan sebagai tempat saling tukar menukar informasi, pemikiran, dll.
Tipe website jenis ini biasanya dibangun seperti website Forum Diskusi Online.
Web File Sharing

Situs bertipe ini dibuat khusus untuk berbagi file baik itu gambar, video, musik, dan file-file digital
lainnya. Situs file sharing ada yang berbayar ada juga yang gratis. Contoh: 4shared.com,
Megaupload.com, melon.co.id, dan lain-lain.
27
Web E-Banking (Internet Banking)

Sekarang melakukan transaksi rekening bank tidak hanya bisa dilakukan didunia nyata saja, namun
didunia maya juga bisa. Inilah yang disebut dengan E-Banking atau Internet Banking. Internet
Banking adalah suatu sistem aplikasi perbankan berbasis website yang dibuat oleh bank-bank
tertentu untuk menjalankan operasinya melalui media internet. Contoh: paypal.com
Web Radio Online

Mendengarkan siaran radio kini bisa dilakukan didunia maya, kecanggihan teknologi Streaming
yang mampu membroadcast suara ke internet menjadi trend tersendiri bagi penggunanya. Namun
sayangnya radio online masih belum berjalan dengan optimal, mengapa demikian? Karena radio
yang memanfaatkan teknologi streaming di internet tidak bersahabat untuk koneksi internet yang
lemot dan lelet. Radio online bisa berjalan dengan optimal jika koneksi internet yang digunakan
benar-benar kencang dan wuzz wuzz :D
Masih banyak tipe website yang tentunya tidak dapat dijelaskan satu persatu disini. Maka dari itu
penulis hanya menjelaskan yang perlu diketahui saja, setidaknya para pembaca yang baru
mengenal dunia website telah mendapat pencerahan dan sinar terang kehidupan. Cie cie :))
Teknologi Website
Web 1.0
Web 1.0 adalah generasi website pertama yang ada di internet. Web 1.0 bersifat statis, artinya
pengunjung hanya bisa membaca isi website, tanpa bisa berkomentar atau melakukan interaksi
dengan website. Contohnya seperti membaca informasi di mading atau papan pengumuman.
Seluruh konten yang ada diwebsite itu sepenuhnya berada di tangan admin.
Web 2.0
Web 2.0 merupakan istilah yang dicetuskan oleh OReilly Media pada tahun 2004, untuk
mendefinisikan generasi teknologi baru berbasis web yang menitikberatkan pada kolaborasi online
antar penggunanya.
28
Web 2.0 merupakan perkembangan dari Web 1.0, Web 2.0 tidak sama dengan Web 1.0, yang
penggunanya hanya bisa membaca saja, namun Web 2.0 mampu memberikan interaksi antara
pengguna dengan website. Dengan aplikasi seperti guestbook, polling, chatting, atau shoutbox,
pengunjung dapat memberikan argumennya didalam website yang sudah berteknologi Web 2.0.
Web 2.0 hadir seiring maraknya pengguna blog, Friendster, Myspace, Youtube dan Fickr. Jadi
mulai dari sinilah kehidupan sosial didunia maya benar-benar terasa. Era ini lebih membutuhkan
orang untuk saling berbagi ilmu, pengalaman atau lainnya sehingga terbentuk komunitas online
besar yang menghapuskan sifat-sifat individu.
Mengenal Lebih Dekat Dengan Web 2.0

Dicuplik dari: www.benpinter.net
Web 2.0 adalah buzzword terbaru di dunia internet. Berbagai inovasi dan fitur-fitur baru yang
muncul di dunia web membawa suatu pandangan baru tentang jenis situs web atau aplikasi web
yang disebut web 2.0. Apakah Anda sudah mengetahuinya kalau situs-situs kesayangan Anda
sudah berwujud dari tipe web 2.0.
Istilah web 2.0 disebut-sebut oleh Dale Dougherty dari OReilly Media yang melakukan
brainstorming dengan Craig Cline dari Media Live untuk menghasilkan ide konferensi di mana
mereka menjadi host. Akhirnya pada bukan Oktober 2004 OReilly Media, Battele dan MediaLive
mlakukan konferensi web 2.0 pertama dan kedua pada bulan Oktober 2005.
Sebelum muncul istilah web 2.0 Istilah yang sering digunakan adalah semantic web. Ada beberapa
karakteristik teknis maupun umum yang menggambarkan suatu situs merupakan tipe web 2.0
Secara teknis atau teknologi:

- Memanfaatkan CSS, valid XHTML, dan Microformat
- MS ClickOnce
- Teknik Rich Application seperti Ajax
- Java Web Start
29
- Flex/Lazlo/Flash
- XUL
- Syndikasi data dengan RSS/Atom
- Agregasi dari RSS/Atom
- URL yang bersih dan berarti
- Mendukung posting ke weblog
- Menggunakan API REST (Representational State Transfer) atau XML Web Service
- aspek jaringan sosial
Umum:
- Mudah untuk memasukkan data atau mengambil data dari sistem
- Pengguna memiliki datanya sendiri pada situs
- Berbasis web murni
Dapat dikatakan bahwa web 2.0 menyajikan suatu layanan web yang berpusat pada user di mana
user dimudahkan untuk menggunakan berbagai layanan yang ada. Misalkan dalam hal user
interface, suatu situs web yang menggunakan teknologi flex (aplikasi rich internet berbasis flash
dari macromedia yang sekarang adobe), lazlo (platform aplikasi flash open source) atau
menggunakan ajax secara intensif seperti gmail atau google map maka situs itu bisa dikatakan
merupakan situs tipe web 2.0.
Anda bisa mencoba aplikasi-aplikasi ajax atau Rich Internet Application berbasis flash pada situssitus berikut:
http://www.gmail.com
http://www.lazlomail.com
http://map.google.com
http://mail.yahoo.com (Anda harus daftar dulu di link yang ada pada Whats New untuk mencoba
versi user interface terbarunya yang sudah memanfaatkan Ajax)
30
Perlu anda ketahui bahwa Ajax adalah kependekan dari Asynchronous Java Script yang
memungkinkan aplikasi website yang lebih interaktif dan kaya fitur sehingga menyerupai
kemampuan aplikasi desktop.
Lalu pemanfaatan tag untuk pengkategorian data yang disubmit oleh user sendiri sehingga user
lain dapat mencari atau menemukannya menggunakan tag-tag juga merupakan salah satu
karateristik jenis web 2.0.
Contoh situs yang memanfaatkan tag-tag untuk contentnya adalah:

http://del.icio.us
http://wwww.technorati.com
http://www.digg.com
http://www.standpoint.com
http://www.askeet.com
Desentralisasi seperti Napster atau pun Bittorrent juga merupakan bagian dari teknologi web 2.0
karena tidak ada server terpusat yang melayani berbagai kebutuhan pengguna tetapi
mendayagunakan komputer jaringan pengguna yang ada di dalamnya.
Publikasi artikel, berita yang sebelumnya didominasi situs resmi seperti cnn.com, news.com, atau
detik.com, kompas.com untuk Indonesia, sekarang sudah mulai disaingi oleh publikasi non resmi
dari perorangan atau lembaga yang tidak ada hubungannya dengan publikasi data media seperti
biasanya melalui blog sehingga kadangkala informasi dari blog bisa lebih cepat atau lengkap.
Aplikasi blog ini juga merupakan bagian dari web 2.0.
Dalam aplikasi blog ini juga biasanya disediakan fasilitas sindikasi di mana kita dapat menampilkan
judul berita dari sumber lain sehingga kita dapat menampilkan judul content dalam berbagai blog
menggunakan aplikasi yang bisa membaca sindikasi itu, baik lewat browser web maupun aplikasi
desktop. Ketersediaan sindikasi ini atau pemanfaatan sindikasi untuk menampilkan berita juga
merupakan bagian dari teknologi web 2.0.
31
Pemanfaatan web service serta REST sebagai teknologi pendukung merupakan salah satu
karakteristik web 2.0 di mana kita dapat membangun aplikasi web tanpa menyediakan atau
membuat fungsi-fungsi pendukung aplikasi sendiri tetapi memanfaatkan fungsi-fungsi aplikasi
yang disediakan dari web lain melalui kedua teknologi ini. Jadi misalkan anda ingin menyediakan
search engine di situs Anda, maka Anda bisa membuat aplikasi yang memanggil fungsi-fungsi
layanan search dari Google atau Yahoo menggunakan REST/Web Service sehingga seakan-akan
aplikasi Anda dapat menyediakan layanan ini tanpa membuat fungsi search sendiri.
Pemanfaatan partisipasi user secara menyeluruh juga merupakan bagian karakteristik dari
teknologi web 2.0, contohnya adalah Wikipedia di mana content dari wikipedia ini dibuat oleh
banyak sekali pengunjung yang langsung dapat mengedit isi dari wikipedia sehingga wikipedia
menjadi ensiklopedia dinamis yang terus bertambah isinya setiap saat sehingga dapat
mengalahkan kelengkapan isi ensiklopedia lain.
Ebay, Amazon maupun Google juga merupakan situs-situs yang mempelopori web 2.0 di mana
mereka memanfaatkan respon user untuk content atau layanan yang mereka sediakan. PageRank
dari Google memanfaatkan klik dari user pada hasil pencarian untuk memberikan penilaian
ketepatan hasil pencarian, Ebay memanfaatkan pengguna untuk layanan jual beli melalui internet
di mana penjual dapat dinilai oleh pembeli-pembelinya secara online, sedangkan Amazon
merupakan situs e-commere yang memanfaatkan respons user untuk menghasilkan pencarian
produk yang lebih sesuai serta memberikan informasi produk apa adanya melalui fasilitas review.
Setelah Web 2.0, Kini Giliran Web 3.0

Dicuplik dari: www.netsains.com
Jika dunia seluler dikenal istilah 3G, maka di Internet ada yang namanya Web 3.0. Wow, apa pula
ini? Apa bedanya dengan Web 2.0 yang sekarang sedang marak? Jangan salah, ternyata orang
Indonesia juga sudah ada yang mengembangkannya.
Saat ini kita memasuki generasi kedua dari website atau disebut dengan web 2.0. Pada generasi
sebelumnya yaitu web 1.0 memiliki ciri-ciri umum yang mencolok yaitu consult, surf dan search.
32
Jadi pada jaman web 1.0 kita kebanyakan hanya sekedar mencari atau browsing untuk
mendapatkan informasi tertentu.
Sosial
Kemudian hadir web 2.0 untuk menggantikan Web 1.0 dimana interaksi sosial di dunia maya
sudah menjadi kebutuhan sehingga era Web 2.0 ini memiliki beberapa ciri mencolok yaitu share,
collaborate dan exploit. Di era Web 2.0 sekarang, penggunaan web untuk berbagi, pertemanan,
kolaborasi menjadi sesuatu yang penting. Web 2.0 hadir seiring maraknya pengguna blog,
Friendster, Myspace, Youtube dan Fickr.
Era Web 2.0 tidak membutuhkan orang jenius yang hanya berkutat sendiri di ruang tertutup atau
laboratorium untuk membuat teknologi baru yang dipatenkan agar membuat dirinya menjadi
terkenal. Tapi era ini lebih membutuhkan orang untuk saling berbagi ilmu, pengalaman atau
lainnya sehingga terbentuk komunitas online besar yang menghapuskan sifat-sifat individu.
Namun lambat laun kebiasaan dan kebutuhan orang di dunia maya selalu berubah dan
bertambah. Hal ini juga sejalan dengan semakin cepatnya akses internet broadband dan teknologi
komputer yang semakin canggih. Jika pada telekomunikasi sudah mulai terdengar isu era 4G,
begitu juga yang terjadi pada dunia website yang juga memunculkan isu akan segera hadirnya era
baru yaitu Web 3.0. Teknologi web generasi ketiga ini merupakan perkembangan lebih maju dari
Web 2.0 dimana disini web seolah-olah sudah seperti kehidupan di alam nyata. Web 3.0 memiliki
ciri-ciri umum seperti suggest, happen dan provide.
Jadi, disini web seolah-olah sudah seperti asisten pribadi kita. Web mulai mengerti kebutuhan kita
dengan bisa memberi saran atau nasehat kita, menyediakan apa yang kita butuhkan. Dengan
menggunakan teknologi 3D animasi, kita bisa membuat profil avatar yang sesuai dengan karakter,
kemudian melakukan aktivitas di dunia maya seperti layaknya di dunia nyata. Kita bisa berjalanjalan, pergi ke mall, bercakap-cakap dengan teman yang lain. Ya, Web 3.0 adalah dunia virtual kita.
33
Buatan Indonesia
Di web 3.0 ini, sudah terjadi konvergensi yang sangat dekat antara dunia TI dengan dunia
telekomunikasi. Dunia web dan telco berkembang pesat seiring dengan kebutuhan pengguna.
Penggunaan perangkat TI dan telekomunikasi nantinya sudah seperti sama saja tidak ada bedanya.
Saat ini saja pertanda seperti itu sudah mulai bisa kita rasakan walaupun masih belum sempurna.
Kita bisa menonton tivi di ponsel atau komputer, bisa mengakses internet di ponsel, bisa
melakukan SMS dan telepon dari komputer. Ya karena konvergensi terhadap berbagai perangkat
seperti hukum alam yang tidak bisa dielakkan.
Apakah saat ini sudah ada website sebagai pertanda bakal masuknya era web 3.0? Ya, model web
3.0 sudah bisa dirasakan salah satunya adalah pada situs secondlife.com . Dan yang juga cukup
membanggakan kita adalah, Indonesia sudah mampu untuk masuk ke dunia Web 3.0 ini dengan
hadirnya lilofriends.com . Situs yang sudah mendekati model Web 3.0 asli karya anak bangsa yang
dikembangkan oleh dikembangkan oleh LiL Online Games dengan engine dari Altermyth Studio.
Hmmanak Indonesia hebat-hebat kan? Banyak lagi contoh lain karya anak bangsa berkualitas
tinggi yang patut menjadi kebanggaan dan tidak kalah dengan produk buatan bangsa lain. Saatnya
ayo berkarya terus memajukan Indonesia!
Web 3.0, Sebuah Bukti Inovasi Tiada Henti

Bersumber dari: www.beritanet.com
Jika ingin melihat akan seperti apa perkembangan web di masa depan, maka Web 3.0 adalah
jawabannya. Terobosan ini merupakan bukti bahwa teknologi World Wide Web selalu
berkembang. Dunia maya telah banyak mempengaruhi kehidupan manusia dewasa ini. Semakin
banyak orang yang menggantungkan perkembangan informasinya kepada Internet, sehingga
teknologi yang dipergunakan dalam pembangunan sebuah situs pun terus berkembang.
Dari era pertama web dikembangkan (Web 1.0), dimana pengunjung hanya bisa mencari
(searching) dan melihat-lihat (browsing) data informasi yang ada di web, kemudian bergeser pada
era pengembangan web kedua (Web 2.0) di mana pengunjung mulai dapat melakukan interaksi
dengan diatur oleh sistem yang ada pada web.
34
Jenis interaksi yang dapat dilakukan pada era kedua ini antara lain untuk saling bertukar informasi
(sharing), eksploitasi informasi, dan juga pembuatan komunitas-komunitas online seperti yang
marak saat ini, seperti Friendster, Multiply, YouTube, dan lain-lain. Masing masing komunitas ini
mempunyai kepentingannya sendiri dalam saling bertukar data maupun informasi yang mereka
himpun.
Dalam era inilah sebenarnya interaksi sosial dalam dunia maya mulai dikembangkan. Dan mulai
dari era ini pulalah ide untuk mengembangkan aspek sosial sebuah web mulai dipikirkan. Aspek
sosial yang dimaksud, terutama adalah aspek interaksi. Bagaimana sebuah web dapat memberikan
sebuah interaksi sesuai dengan kebutuhan informasi setiap pemakaianya, merupakan sebuah
tantangan utama dikembangkannya versi Web 3.0 ini.
Walaupun hanya bersifat virtual 3D, namun ternyata banyak yang mengharapkan perkembangan
teknologi web ini dapat memenuhi kebutuhan setiap bidang informasi, bahkan setiap orang yang
mengunjunginya. Jika dianalogikan dalam kehidupan nyata, masyarakat kini ingin diperlakukan
seperti seorang pengunjung butik dalam mendapatkan apa yang diinginkannya. Bukan seperti
pengunjung supermarket yang dibiarkan mencari dan mendapatkan sendiri barang yang
dinginkannya. Pengunjung sebuah web ingin dimengerti kemauannya oleh toko penyedia
informasi (dalam hal ini website).
Inilah yang dimaksud dengan tantangan bagaimana sebuah web dapat mengerti dan membantu
pengunjung dalam berinteraksi dengan semua informasi yang ada. Sehingga tak mengherankan
jika kemudian ciri dari pengembangan web generasi ketiga ini adalah web yang bersifat nyata,
benar-benar ada interaksi yang terjadi, kemudian dapat memberikan arahan atau anjuran kepada
pengunjung dalam mendapatkan informasi yang diharapkannya, dan tentu saja juga tetap bersifat
provide atau mampu menyediakan informasi yang dibutuhkan.
Web 3.0 sendiri merupakan sebuah proyek pengembangan semantic web, yaitu sebuah sistem
web yang dapat melacak setiap kaitan dari kata-kata yang terangkai, berkaitan dengan arti setiap
kata yang dipakai.
35
Tujuannya tentu saja agar web dapat menjadi media umum untuk bertukar informasi melalui
dokumen-dokumen yang bahasanya dapat dimengerti oleh sistem, sehingga para pengunjung web
dapat dengan mudah mencari data yang tepat atau minimal berkaitan dekat dengan apa yang kita
maksud.
Web 3.0 sendiri merupakan sebuah realisasi dari pengembangan sistem kecerdasan buatan
(artificial intelegence) untuk menciptakan global meta data yang dapat dimengerti oleh sistem,
sehingga sistem dapat mengartikan kembali data tersebut kepada pengunjung dengan baik.
Saat ini adaptasi Web 3.0 mulai dikembangkan oleh beberapa perusahaan di dunia seperti
secondlife, Google Co-Ops, bahkan di Indonesia sendiri juga sudah ada yang mulai
mengembangkannya, yaitu LiL Online (LILO) Community. Permasalahan lain yang potensial
muncul adalah, sebagai teknologi masa depan, Web 3.0 juga membutuhkan kecepatan akses
Internet yang memadahi dan spesifikasi komputer yang tidak enteng, hal ini disebabkan tak lain
karena teknologi ini secara visual berbasis 3D.
Sedangkan seperti yang kita tahu biaya akses Internet dengan kecepatan tinggi di Indonesia ini
masih terbilang mahal bagi masyarakat umum. Belum lagi jika dihitung dari biaya spesifikasi
perangkat komputer yang dibutuhkan, mungkin masyarakat Indonesia yang ingin menikmati
kecanggihan layanan berbasis teknologi Web 3.0 masih harus menarik nafas penjang.
Namun karena Web 3.0 sendiri masih dalam pengembangan, seiring dengan berlalunya waktu
sebagai masyarakat Indonesia kita masih bisa mengharapkan bahwa biaya komunikasi, dalam hal
ini koneksi Internet kecepatan tinggi akan semakin murah nantinya, sehingga terjangkau bagi
masyarakat luas.
36
Biografi Penulis
Lampung. Menekuni web design sejak tahun 2009 dan sudah
membuat berbagai macam karya website seperti Toko online,
web personal, sekolah, lembaga, web company profil, radio
online, dan program aplikasi berbasis website seperti Helpdesk
Request System. Pendiri Miniw0rm University, Miniw0rm CMS, dan Miniw0rm Inc. Selain itu ia
merupakan penulis muda yang telah menelurkan buku IT berjuul Cepat Mahir Pemrograman Web
Dengan PHP dan MySQL terbitan Prestasi Pustaka Raya.
Salah satu karya terbaiknya yang telah diminati banyak programmer tanah air adalah Miniw0rm
CMS. Sebuah Content Management System yang ditulis dengan bahasa pemrograman PHP dan
MySQL, Miniw0rm CMS berlisensi open source, artinya siapa saja boleh memodifikasinya serta
menggunakannya sesuai dengan keinginan masing-masing. Miniw0rm CMS dibuat dengan model
programming for future, artinya semua code yang ditulis dengan teknik pemrograman
yang mereka gunakan. Menekuni bahasa pemrograman, bahasa scripting dan bahasa markup
berbasis website seperti: PHP, CSS, X(HTML), Javascript, JQuery, Ajax, XML dan MySQL.
Contact Person
Lesson 2: Web Design

CSS Fundamental
Oleh:
Virgiawan Listanto
Lisensi Dokumen:
Semua isi yang ada didalam buku ini bebas digunakan, dan disebarkan
secara bebas untuk tujuan bukan komersial. Dengan syarat tidak
menghapus atau mengubah attribute penulis dan copyright Miniw0rm
University tanpa sepengetahuan dari penulis.
Daftar Isi
Biografi Penulis
Pendahuluan
BAB I Pengenalan CSS
Apa itu CSS?
Sejarah CSS
Versi CSS
BAB II Dasar-Dasar CSS
Syntax CSS
Pengelompokkan Selector
Penggunaan Bebebarapa Property
Cara Penulisan Syntax Yang Baik
Komentar Pada CSS
BAB III Implementasi CSS
Inline Style Sheet
Embedded Style Sheet
External Style Sheet
Selector Class dan ID
BAB IV CSS Fundamental
CSS Styling Background
CSS Styling Text
CSS Styling Font
CSS Styling Link
CSS Styling List
CSS Styling Table
CSS Box Model
BAB V CSS Reference
CSS Selector Reference
CSS Property Reference
Pendahuluan
CSS (Cascading Style Sheet) merupakan salah satu teknologi internet yang wajib dipelajari. Dengan
adanya CSS, kita dapat menyulap tampilan website yang terlihat biasa-biasa saja, menjadi luar
biasa. Dengan perintah-perintah CSS, kita diberi kebebasan untuk mengubah jenis huruf, warna
huruf, ukuran huruf, background website, margin, padding, dan masih banyak lagi. Bagaimana,
menarik bukan? Apakah anda sudah siap belajar CSS bersama penulis? Oke, Lets do it !
BAB I Pengenalan CSS

Apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan bahasa stylesheet
yang digunakan untuk mengatur tampilan dokumen HTML. Dengan perintah CSS, kita bebas
mengubah jenis huruf, ukuran huruf, warna huruf, warna background, ukuran gambar, margin,
padding, paragraf, border tabel, dan masih banyak lagi.
Namun, CSS juga memiliki kelemahan. Kelemahannya adalah tidak mesti semua browser support
dengan CSS. Artinya setiap browser memiliki caranya tersendiri untuk mengartikan code-code CSS
yang kita tulis. Makanya, terkadang tampilan website yang kita buat terlihat bagus di browser yang
satu (misalnya firefox), tapi malah terlihat amburadul dibrowser yang lain (misalnya internet
explorer). Tenang dulu jangan panik, sekarang ini hampir semua browser sudah support kok
dengan bahasa CSS :D
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan. Yang kemudian membentuk hubungan antara ayah-anak (parent-child) pada setiap
style. CSS sendiri merupakan salah satu teknologi internet yang direkomendasikan oleh World
Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet
Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak
hampir mendekati dengan standar CSS.
Versi CSS
Untuk saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada
pemformatan dokumen HTML. CSS2 dikembangkan untuk memenuhi kebutuhan peformatan
dokumen HTML agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS
yang mampu melakukan banyak hal dalam desain website.
CSS2 mendukung pemformatan posisi konten, huruf (font), tampilan tabel (table layout) dan
media tipe untuk printer. Kehadiran CSS versi dua diharapkan lebih baik dari versi pertama.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga
animasi 3D. Dengan CSS3, desainer website lebih dimudahkan dalam hal kompatibilitas
websitenya. Misalnya pada smartphone dengan dukungan fitur baru yakni @media query. Selain
itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow,
border-image, CSS Math, dan CSS Object Model.
BAB II Dasar-Dasar CSS

OKE, Sekarang kita akan masuk pada pembahasan tentang dasar-dasar CSS. Jangan tegang,
silahkan putar lagu-lagu kesayangan anda dan mari belajar dengan santai :D
Syntax CSS
Apa itu Syntax CSS? Syntax CSS adalah perintah-perintah yang digunakan untuk mengatur
tampilan dokumen HTML. Syntax CSS terdiri dari: Selector, Property, dan Value.
Contoh penulisan syntax CSS adalah sebagai berikut:
selector { property: value }
Apa itu Selector?

Selector adalah perintah yang menunjukan bagian mana yang ingin diformat.
Apa itu Property dan Value?

Property adalah attribute dari selector. Sedangkan Value adalah Nilai dari Property.
Contoh Syntax:
h1 { color: red }
Penjelasan:
h1 = Selector
color = Property
red = Value
Artinya, kita akan mengatur element HTML <h1> menjadi berwarna merah (red).
Pengelompokan Selector
Jika anda ingin mengatur lebih dari satu selector, maka selector tersebut harus dikelompokan
dengan dipisahkan oleh tanda koma ,. Contohnya jika kita ingin mengatur element <h1>, <h2>,
dan <h3> menjadi berwarna merah semua, maka syntax penulisannya akan menjadi seperti ini:
Contoh:
h1, h2, h3 { color: red }
Penggunaan Banyak Property

Jika anda ingin menggunakan lebih dari satu property, maka gunakanlah tanda titik koma ; untuk
memisahkannya.
Contoh:
h1 { color: red; font-family: arial; font-size: 12px }
Penjelasan:
Syntax css diatas akan memformat element HTML <h1> menjadi huruf arial, berukuran 12 pixel,
dan huruf tersebut berwarna merah.
Cara Penulisan Syntax Yang Baik

Dalam penulisan Syntax CSS, Sangat disarankan untuk menggunakan beberapa baris baru dalam
mengatur property dan value.
Contohnya:
h1 {
color: red;
font-family: arial;
font-size: 12px
}
Contoh diatas sama halnya dengan syntax:

h1 { color: red; font-family: arial; font-size: 12px }
Lebih enak melihat yang mana? Tentu yang menggunakan beberapa baris baru bukan? :D
Komentar Pada CSS

Seperti halnya komentar pada HTML, CSS juga memiliki syntax yang mendefinisikan dirinya sebagai
komentar (pengingat). Komentar pada CSS didefinisikan menggunakan syntax /* dan */
(Dibuka dengan slash bintang, dan ditutup dengan bintang slash).
Ingat! Yang namanya komentar tidak akan dibaca sebagai code oleh browser, tapi hanya dibaca
sebagai text pengingat. Dan tentunya komentar tersebut tidak akan ditampilkan oleh browser.
Contoh penggunaan komentar CSS:

/* ini adalah syntax css untuk element h1 */
h1{
font-family: arial;
color: red;
}
Oke, karena kita sudah mempelajari dasar-dasar CSS, maka pada pembahasan selanjutnya kita
akan belajar mengimplementasikan CSS pada suatu dokumen HTML. Are you ready?
BAB III Implementasi CSS

Pada bab ini penulis akan mengajak kalian semua untuk mengimplementasikan CSS pada suatu
dokumen HTML. Oke langsung saja!
Bagaimana Caranya Menggunakan CSS?
Kita dapat menggunakan CSS dan memasangnya kedalam skrip HTML melalui 4 Cara. Yaitu:
1. Inline Style Sheet
2. Embedded Style Sheet
3. External Style Sheet
Inline Style Sheet

Apa itu Inline Style Sheet? Inline Style Sheet adalah cara menuliskan CSS secara langsung pada tag
HTML yang bersangkutan. Cara penulisannya cukup mudah, yaitu dengan menambahkan attribute
style="..." pada tag HTML tersebut. Ingat! Style hanya berlaku pada tag yang bersangkutan,
dan tidak akan mempengaruhi tag yang lain.
Contoh:
<html>
<head>
<title> Belajar Inline Style Sheet </title>
</head>
<body>
<h4 style="color: red; font-family: verdana">
Teks H4 ini akan berwarna merah, dan akan berjenis huruf Verdana
</h4>
</body>
</html>
Contoh lagi:
<html>
<head>
<title> Belajar Inline Style Sheet 2</title>
</head>
<body>
<p style="color: blue">
Teks didalam paragraf ini akan berwarna biru :D
</p>
</body>
</html>
Oke, penulis harap kalian sudah dapat menguasai teknik Inline Style Sheet ini. Sekarang kita akan
lanjut membahas Embedded Style Sheet :D
10
Embedded Style Sheet

Apa itu Embedded Style Sheet? Embedded Style Sheet adalah Cara menggunakan CSS yang
didefinisikan dulu menggunakan tag <style> dan </style>, dan tag <style> ini harus berada
didalam tag <head> dan </head>. Oke dari pada mumet, langsung saja kita praktekan!
Oh iya! Penulisan tag <style> harus memenuhi standar seperti ini:

<style type=text/css>
.. isi css .
</style>
Ingat! Jangan lupa dikasih attribute dan value type=text/css pada tag <style> yak :D
Contoh:
<html>
<head>
<title> Belajar Embedded Style Sheet</title>
h3 {
color: green;
font-family: Tahoma;
font-size: 12px
}
</style>
</head>
<body>
<h3>
Teks h3 ini akan berwarna hijau, berukuran 12 pixel dan berjenis huruf tahoma :D
</h3>
</body>
</html>
11
Contoh Lagi:
<html>
<head>
<title> Belajar Embedded Style Sheet 2</title>
h3 {
color: green;
font-family: Tahoma;
font-size: 12px
}
p{
Color: red;
Font-family: arial
}
</style>
</head>
<body>
<h3>
Teks h3 ini akan berwarna hijau, berukuran 12 pixel dan berjenis huruf tahoma :D
</h3>
<p> Teks didalam Paragraf ini akan berwarna merah, dan berjenis huruf arial :D </p>
</body>
</html>
12
External Style Sheet

Apa itu External Style Sheet? External Style Sheet adalah Cara menggunakan CSS yang dibuat pada
file terpisah dan berekstensi .css, Untuk menggunakan External Style Sheet kita cukup memanggil
file .css yang terpisah tersebut dengan menggunakan tag <link />, dan tag ini harus berada didalam
tag <head> dan </head>.
Spesifikasi penggunaan tag link adalah sebagai berikut:

<link rel=stylesheet type=text/css href=nama_file_external.css />
Penjelasan:
<link = adalah tag HTML
rel= = adalah attribute HTML dari tag <link />
stylesheet = adalah Value dari attribute rel=..
type= = adalah attribute HTML dari tag <link />
text/css = adalah Value dari attribute type= yang mendefinisikan bahwa file yang akan
di panggil adalah file bertipe css
href= = adalah attribute HTML yang mendefinisikan lokasi file external tujuan
nama_file_external.css = adalah nama file external style sheet yang akan dipanggil
/> = Adalah tag penutup
13
Contoh menggunakan External Style Sheet:

1. Buatlah file dengan nama external.css dan tulis skrip css berikut:
p{
color: red;
background-color: yellow
}
h4 {
Color: blue;
Font-size: 12px
}
2. Setelah itu buat file dengan nama belajarexternal.html dan isi skrip HTML berikut:
<html>
<head>
<title> Belajar External Style Sheet </title>
<link rel=stylesheet type=text/css href=external.css />
</head>
<body>
<p> Text didalam paragraf ini akan berwarna merah, dan backgroundnya berwarna kuning </p>
<h4> Text h4 ini akan berwarna biru, dan berukuran 12 pixel </h4>
</body>
</html>
14
Bagaimana, lebih mudah menggunakan External Style Sheet kan? Jadi misalkan kita memiliki
banyak halaman website, kita tidak perlu repot-repot lagi menuliskan syntax css satu persatu
didalam dokumen HTML tersebut. Dengan adanya External Style Sheet, kita dimudahkan dalam
masalah pengaturan css menggunakan metode file terpisah.
Yang musti di ingat! jika file external yang berekstensi .css berada didalam suatu folder, maka pada
attribute href= harus ditulis juga nama foldernya, supaya file externalnya itu kepanggil.
Contohnya gini:
<link rel=stylesheet type=text/css href=namafolder/file_external.css />
Selector Class Dan ID

Masih ingat kan tentang penggunaan selector? Kali ini penulis akan menjelaskan apa itu Class dan
ID selector.
Referensi: http://www.belajarcss.com/panduan-css/class-dan-id-selector/
Apa itu Selector Class?
Selector Class adalah penggabungan beberapa property yang akan digunakan lebih dari satu kali.
Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah
berwarna hitam. Untuk kasus seperti ini, kita dapat menggunakan Selector Class. Cara menuliskan
Selector Class cukup mudah, kita hanya perlu menggunakan tanda titik . Dan setelah tanda titik
tersebut kita sertakan nama class yang diinginkan. Kemudian kita berikan attribute class=
pada tag HTML yang ingin diformat.
Contohnya:
.virgi { property: value }
Artinya, kita akan membuat Selector Class bernama virgi.
Untuk menempelkan Selector Class ke dalam tag HTML:
taghtml.namaclass { Property: value; }
15
<html>
<head>
<title> Belajar Selector Class </title>
.virgi {
color: green;
font-family: verdana;
font-size: 12px
}
.ambar {
color: red;
}
</style>
</head>
<body>
<p class=virgi>
Text didalam paragraf ini akan berwarna hijau, berjenis huruf verdana, <br />
dan berukuran 12 pixel. Sesuai dengan pengaturan pada class .virgi { }
</p>
<h3 class=ambar>
Text didalam tag h3 ini akan berwarna merah, <br />
Sesuai dengan pengaturan pada class .ambar { }
</h3>
</body>
</html>
16
Apa itu Selector ID?

Selector ID tidak jauh berbeda dengan Selector Class, yaitu menggabungkan beberapa property
yang akan digunakan lebih dari satu kali. Untuk membedakannya, gunakanlah selector ID untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk
memformat bagian menu/sidebar.
Cara menggunakan Selector ID cukup mudah, kita hanya perlu menggunakan tanda pagar #
disertai dengan nama ID yang diinginkan. Kemudian kita berikan attribute id= pada tag HTML
yang ingin diformat.
Contohnya:
#virgi { property: value }
Artinya, kita akan membuat Selector ID bernama virgi.
Untuk menempelkan Selector ID ke dalam tag HTML:

taghtml.namaID { Property: value; }
17
<html>
<head>
<title> Belajar Selector ID</title>
#virgi {
color: green;
font-family: verdana;
font-size: 12px
}
#ambar {
color: red;
}
</style>
</head>
<body>
<p id=virgi>
Text didalam paragraf ini akan berwarna hijau, berjenis huruf verdana, <br />
dan berukuran 12 pixel. Sesuai dengan pengaturan pada ID #virgi { }
</p>
<h3 id=ambar>
Text didalam tag h3 ini akan berwarna merah, <br />
Sesuai dengan pengaturan pada ID #ambar { }
</h3>
</body>
</html>
18
Contoh Lagi:
<html>
<head>
<title> Belajar Selector ID 2</title>
#saya { color: green }
</style>
</head>
<body>
<p id=saya>
Text didalam paragraf ini akan berwarna hijau, <br />
Sesuai dengan pengaturan pada ID #saya { }
</p>
<h3 id=saya>
Text didalam tag h3 ini akan berwarna hijau, <br />
Sesuai dengan pengaturan pada ID #saya { }
</h3>
</body>
</html>
19
BAB IV CSS Fundamental

Sekarang kita sudah sampai pada pembahasan CSS Fundamental, penulis harap para pembaca
lebih fokus dalam menyerap materi ini. Oke, Mari kita lanjutkan petualangan kita!
CSS Styling Background

CSS memiliki beberapa property untuk memformat tampilan background. Baik itu background
berwarna, atau background bergambar. Property-property pada CSS Background antara lain:
background-color
background-image
background-repeat
background-position
Background Color
Property background-color digunakan untuk memberi warna pada background.
body { background-color: red }
atau
body { background-color: #ff0000 }
20
Penjelasan:
Pada syntax css diatas kita akan mengubah warna background pada tag <body> menjadi berwarna
merah. Warna merah pada hexadecimal adalah #ff0000.
Contoh:
<html>
<head>
<title> Belajar CSS Background-color </title>
.virgi {
background-color: green;
color: yellow
}
p{
background-color: blue;
color: yellow
}
</style>
</head>
<body>
<div class=virgi>
Text yang berada didalam element div akan berwarna kuning <br />
Dan background element div akan berwarna hijau
</div>
<p>
Text yang berada didalam element P, akan berwarna kuning <br />
Dan warna background element P, akan berwarna biru
</p>
</body>
</html>
21
Background Image
Property background-image pada css, memungkinkan kita untuk memberikan background
bergambar. Yang musti di ingat adalah lokasi atau letak dimana gambar berada harus benar.
Supaya background yang dipanggil menggunakan syntax background-image tampil di browser.
Contoh penggunaan:
body {
background-image:url(gambar.gif);
}
Jika gambar yang akan dijadikan background berada didalam suatu folder, maka perintahnya:
body {
background-image:url(namafolder/gambar.gif);
}
Format gambar yang boleh dijadikan background adalah: JPG, GIF, dan PNG
22
Contoh:
<html>
<head>
<title> Belajar Background-image </title>
<style type="text/css">
body {
background-image:url('paper.gif');
}
</style>
</head>
<body>
<h1> Hello World! </h1>
</body>
</html>
Contoh Lagi:
<html>
<head> <title> Belajar Background-image 2 </title>
body {
background-image:url('retak.jpg);
}
</style>
</head>
23
<body>
</body>
</html>
Background Repeat
Property background-repeat memungkinkan kita untuk mengulangi gambar background baik
secara vertical ataupun secara horizontal. Namun ada beberapa gambar yang harus digunakan
secara spesifik, Artinya gambar tersebut harus diulang (di repeat) secara vertical, atau secara
horizontal agar tampilan background yang digunakan tidak aneh pada saat ditampilkan di browser.
Contoh Aneh-nya:
<html>
<head> <title> Background Repeat Aneh </title>
body {
background-image:url('gradient2.png');
}
</style>
</head>
<body>
</body>
</html>
24
Bagaimana cara mengatasinya?

Cara mengatasinya adalah dengan memberikan property background-repeat: dengan value
repeat-x; (repeat-x = horizontal, repeat-y = vertical).
Contohnya:
<html>
<head> <title> Background Repeat Horizontal </title>
body {
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>
25
Bagaimana? Sudah tidak aneh lagi kan? :D :D hehe..
Backround Image Dengan Set Position Dan no-repeat

Disarankan jika anda menggunakan background bergambar, jangan menggunakan gambar
background yang mengganggu tampilan teks.
Property background-repeat:no-repeat; akan mendefinisikan gambar background tidak berulang.

Sedangkan property background-position: value; digunakan untuk mengatur letak gambar
background tersebut. Oke, dari pada mumet langsung saja kita praktekan!
<html>
<head>
<title> Belajar Background Image No Repeat dan Set Position </titile>
body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
</style>
</head>
26
<body>
<h1> Selamat Datang Diwebsite Saya </h1>
<p> Silahkan lihat-lihat, dan bersenang-senang ria disini :D </p>
</body>
</html>
CSS Styling Text

Penggunaan CSS Text memungkinkan kita untuk memformat text, ada beberapa property yang
bisa digunakan untuk memformat text, antara lain:
color
text-align
text-decoration
text-transformation
27
Color
Property color memungkinkan kita untuk mengubah warna text. Contoh penggunaannya adalah
sebagai berikut:
h1 {
Color: #ff00000;
}
Atau
h1 {
Color: red;
}
Contoh:
<html>
<head>
<title> Belajar Text Color </titile>
h1 {
Color: red;
}
p{
Color: #ff0000;
}
</style>
</head>
<body>
<h1> Text h1 ini berwarna merah dengan code warna (red) </h1>
<p> Text didalam pargraf ini berwarna merah dengan code warna hexa (#ff0000) </p>
</body>
</html>
28
Text Aligment
Dengan property text-align, kita dapat mengatur alignment text baik secara center, justify, left,
atau right. Sangat disarankan menggunakan aligment justify jika anda memiliki sebuah website
yang didalamnya terdapat banyak text. Karena aligment justify akan mengatur text secara
merata kanan dan kiri, jadi text anda terlihat enak dibaca.
Contoh Penggunaan Property Text Alignment:
<html>
<head> <title> Belajar Text Alignment </titile>
p{
text-align: justify;
}
</style>
</head>
<body>
<p> Text didalam pargraf ini akan terlihat rata kanan dan kiri (justify), karena sudah diatur dengan
menggunakan property text-align. Bagaimana enak kan dibacanya :D iya nggak hehehe :D </p>
</body>
</html>
29
Text Decoration
Property text-decoration digunakan untuk menghapus atau membuat dekorasi pada text. Biasanya
property ini digunakan untuk menghilangkan tanda garis bawah pada sebuah link.
Contohnya:
<html>
<head>
<title> Belajar Text Decoration </titile>
a.dekorasi {
text-decoration: none;
}
</style>
</head>
<body>
<a href=# class=dekorasi>
Ini adalah link dengan CLASS .dekorasi { } yang sudah dihilangkan tanda garis bawahnya
</a> <br /> <br />
<a href=#> Sedangkan ini adalah Link yang belum diapa2kan. (belum diformat) </a>
</body>
</html>
30
Value untuk property text-decoration selengkapnya yaitu:

text-decoration:none; = Membuat text Tidak berdekorasi
text-decoration:overline; = Membuat dekorasi text bergaris atas
text-decoration:line-through; = Membuat dekorasi text bergaris tengah
text-decoration:underline; = Membuat dekorasi text bergaris bawah
text-decoration:blink; = Membuat dekorasi text menjadi animasi berkedip-kedip
Contohnya:
<html>
<head>
<title> Belajar Text Decoration Lengkap </title>
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
h4 { text-decoration: blink; }
</style>
</head>
<body>
<h1> This is heading 1 </h1>
31

</body>
</html>
Text Transformation
Property text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah
teks. Property ini juga dapat mengubah semua text menjadi huruf besar atau huruf kecil.
Value/nilai dari property text-transform antara lain:
text-transform:uppercase;
text-transform:lowercase;
text-transform:capitalize;
Uppercase = membuat huruf menjadi besar.

Lowercase = membuat huruf menjadi kecil.
Capitalize = membuat huruf menjadi kapital.
32
Contoh:
<html>
<head>
<title> Belajar Text Transformation </title>
.uppercase { text-transform:uppercase; }
.lowercase { text-transform:lowercase; }
.capitalize { text-transform:capitalize; }
</style>
</head>
<body>
<p class="uppercase"> Ini adalah teks dengan huruf Uppercase </p>
<p class="lowercase"> Ini adalah teks dengan huruf Lowercase </p>
<p class="capitalize"> Ini adalah teks dengan huruf Capitalize </p>
</body>
</html>
33
CSS Styling Font

Sudah disinggung pada bab sebelumnya, kalau CSS memberikan kita kebebasan untuk memformat
tampilan huruf (font). Apa saja property yang digunakan oleh CSS Font dalam pemformatan huruf?
Property yang digunakan antara lain:
font-family
font-size
font-style
font-weight
Font Family
Property font-family digunakan untuk memformat jenis huruf. Pemberian Value/nilai pada
property ini harus sesuai dengan nama font yang bersangkutan. Jika browser tidak dapat
membaca font yang sudah anda tentukan, maka browser akan membaca font berikutnya.
Misalnya anda sudah menentukan font comic sans kemudian browser tidak dapat
menampilkannya, maka untuk mengantisipasi hal tersebut browser akan menampilkan jenis font
default. Artinya font default adalah font yang sudah disetting secara otomatis oleh browser.
Contoh penggunaan property font-family:
<html>
<head>
<title> Belajar Font-family </title>
.huruf { font-family:arial; }
</style>
</head>
<body>
<p class="huruf"> Font didalam paragraf ini akan berjenis arial </p>
</body>
</html>
34
Contoh Lagi:
<html>
<head>
<title> Belajar Font-family 2</title>
.huruf { font-family:verdana; }
.huruf2 { font-family:courier new; }
</style>
</head>
<body>
<p class="huruf"> Font didalam paragraf ini akan berjenis verdana </p>
<p class="huruf2"> Font didalam paragraf ini akan berjenis courier new </p>
</body>
</html>
35
Font Size
Property font-size pada css digunakan untuk mengatur ukuran huruf (font). Dalam memformat
ukuran huruf kita dapat menggunakan beberapa format ukuran diantaranya: pixel, persen, dan
em. Pixel didefinisikan dengan (px), Persen didefinisikan dengan (%), sedangkan em didefinisikan
dengan (em).
Font Size Pixel

<html>
<head>
<title> Belajar Font-Size Pixel</title>
.huruf { font-size:26px; }
</style>
</head>
<body>
<p class="huruf"> Font didalam paragraf ini akan berukuran 26 pixel (26px) </p>
</body>
</html>
36
Font Size em
Untuk menghindari masalah ukuran huruf dengan browser Internet Explorer, banyak pengembang
web menggunakan ukuran huruf em daripada pixel. Ukuran em sendiri direkomendasikan oleh
W3C. 1em sama dengan ukuran font saat ini. Ukuran teks default pada browser adalah 16px. Jadi,
ukuran default 1em adalah 16px. Untuk menentukan ukuran em, kita dapat menghitungnya
menggunakan rumus: pixel/16px = em (sederhananya = ukuran pixel dibagi 16 px = em)
Contoh Penggunaan Font Size Dengan Ukuran Em:

<html>
<head>
<title> Belajar Font-Size em</title>
.huruf1 { font-size:2.5em; }
</style>
</head>
<body>
<p class="huruf1"> Font didalam paragraf ini akan berukuran 2.5em </p>
</body>
</html>
37
Rumus: (pixel/16px = em)

2.5em didapat dari: 40px/16px = 2.5 em (40 pixel dibagi 16 pixel = 2.5 em)
Font Size Persen

Sekarang kita akan mencoba memformat ukuran huruf menggunakan persen. Persen dalam value
property font-size didefinisikan dengan tanda %. Contoh penggunaannya sebagai berikut:
<html>
<head>
<title> Belajar Font-Size Persen </title>
.huruf { font-size:150%; }
</style>
</head>
38
<body>
<p class="huruf"> Font didalam paragraf ini akan berukuran 150% </p>
</body>
</html>
Font Style
Property font-style biasanya digunakan untuk menentukan huruf miring. Property ini memiliki tiga
value/nilai, yaitu: normal, italic, dan oblique.
normal = Membuat huruf dalam keadaan normal.
italic = Membuat huruf menjadi miring.
oblique = Membuat huruf miring sama seperti italic.
Contoh:
<html>
<head>
<title> Belajar Font-Style </title>
.huruf1 { font-style:normal; }
.huruf2 { font-style:italic; }
.huruf3 { font-style:oblique; }
</style>
</head>
39
<body>
<p class="huruf1"> Font didalam paragraf ini akan tampak Normal (normal) </p>
<p class="huruf2"> Font didalam paragraf ini akan tampak Miring (italic) </p>
<p class="huruf3"> Font didalam paragraf ini akan tampak Miring (oblique) </p>
</body>
</html>
Font Weight
Property font-weight digunakan untuk memformat ketebalan huruf. Value dari property ini yaitu:
normal = mendefinisikan huruf normal
bold, = mendefinisikan huruf tebal
bolder, = mendefinisikan huruf lebih tebal
lighter, = mendefinisikan huruf seperti normal
100 900, = mendefinisikan ketebalan huruf dengan angka, mulai dari 100 sampai 900
40
Contoh:
<html>
<head>
<title> Belajar Font-weight</title>
.huruf1 { font-weight:normal; }
.huruf2 { font-weight:bold; }
.huruf3 { font-weight:bolder; }
.huruf4 { font-weight:lighter; }
.huruf5 { font-weight:700; }
</style>
</head>
<body>
<p class="huruf1"> Font didalam paragraf ini akan tampak normal </p>
<p class="huruf2"> Font didalam paragraf ini akan tampak tebal </p>
<p class="huruf3"> Font didalam paragraf ini akan tampak lebih tebal </p>
<p class="huruf4"> Font didalam paragraf ini akan tampak seperti normal</p>
<p class="huruf5"> Font didalam paragraf ini akan tampak dengan ketebalan 700 </p>
</body>
</html>
41
CSS Styling Link

Tampilan link dapat kita format menggunakan CSS Styling Link misalnya warna, font-family, textdecoration, dan lain-lain. CSS Link memiliki beberapa selector yang digunakan untuk mengatur
tampilan link, yaitu:
a:link = Keadaan Link sebelum di klik
a:visited = Keadaan Link jika user melakukan klik
a:hover = Keadaan Link ketika user meletakkan cursor mouse diatas suatu link
a:active = Keadaan Link ketika sudah di klik
Cara menggunakannya Selector Link juga bermacam-macam. Jika anda memiliki banyak link,
kemudian anda ingin menggunakan pemformatan untuk link yang berbeda-beda, disarankan
untuk menuliskan CSS Link dengan class seperti ini:
a.classname:selectorlink
artinya kita akan memformat tag link <a> dan </a> menggunakan Class dengan nama .classname
dan disertai dengan :selectorlink yang ditentukan baik itu visited, hover, atau active.
Contoh:
<html>
<head>
<title> Belajar CSS Styling Link </title>
a:link { color:red; }
a:hover { color:black; }
a:visited { color:green; }
a:active { color:yellow; }
</style>
</head>
42
<body>
<a href="#"> Ini adalah Link yang sudah diformat menggunakan selector link </a>
</body>
</html>
Untuk mencobanya, silahkan anda save skrip diatas dengan nama css-link.html lalu jalankan
dibrowser anda. Kemudian coba anda arahkan mouse diatas link tersebut, klik link tersebut, dan
lihat apa yang terjadi :) Skrip diatas akan memformat semua element <a> </a> sesuai dengan
pengaturan CSS yang sudah dibuat.
Contoh menggunakan Gabungan Class dan Selector Link:

<html>
<head>
<title> Belajar CSS Styling Link 2</title>
a.virgi:link { color:red; text-decoration:none; font-weight:bold }
a.virgi:hover { color:black; }
a.virgi:visited { color:green; }
</style>
</head>
<body>
<a href="#" class=virgi> Ini adalah Link yang sudah diformat menggunakan class virgi </a>
<br /> <br /> <a href=#> Ini adalah Link yang tidak diberi class, tampak biasa kan? </a>
</body>
</html>
43
CSS Styling List

Dengan CSS Styling List, kita dapat memformat tampilan element HTML List sesuai dengan yang
kita inginkan. Pada buku HTML Fundamental sebelumnya, kita sudah mengenal dua jenis element
List, yaitu Ordered List <ol> dan Unordered List <ul>. Property-property yang digunakan pada CSS
Styling List adalah:
list-style-type, digunakan untuk mengubah item list
list-style, digunakan untuk mengatur seluruh item list namun property ini lebih pendek
list-style-image, digunakan untuk mengubah item list dengan gambar
List Style Type

Property list-style-type digunakan untuk mengubah tampilan daftar item list. Value dari property
list-style-type adalah sebagai berikut:
armenian = Mengubah tampilan item list menjadi tradisional armenia
circle = Mengubah tampilan item list menjadi bulatan putih (circle)
cjk-ideographic = Mengubah tampilan list menjadi ideografik
decimal = Mengubah tampilan list menjadi angka desimal (default list pada tag <ol>)
decimal-leading-zero = Mengubah tampilan list menjadi nol angka (01, 02, 03 dst)
disc = Mengubah tampilan list menjadi bulatan hitam (default list pada tag <ul>)
georgian = Mengubah tampilan list menjadi tradisional georgian
44
hebrew = Mengubah tampilan list menjadi tradisional hebrew

hiragana = Mengubah tampilan list menjadi tradisional hiragana
hiragana-iroha = Mengubah tampilan list menjadi tradisional hiragana iroha
katakana = Mengubah tampilan list menjadi tradisional katakana
katakana-iroha = Mengubah tampilan list menjadi tradisional katakana iroha
lower-alpha = Mengubah tampilan list menjadi lower alphabet (a, b, c, d, e, dst)
lower-greek = Mengubah tampilan list menjadi lower greek
lower-latin = Mengubah tampilan list menjadi lower latin (a, b, c, d, e, dst)
lower-roman = Mengubah tampilan list menjadi lower roman (i, ii, iii, iv, v, dst)
none = Mengubah tampilan item list menjadi kosong (tidak ditampilkan)
square = Mengubah tampilan list menjadi kotak
upper-alpha = Mengubah tampilan list menjadi upper alphabet (A, B, C, D, E, dst)
upper-latin = Mengubah tampilan list menjadi upper alphabet (A, B, C, D, E, dst)
upper-roman = Mengubah tampilan list menjadi upper alphabet (I, II, III, IV, V, dst)
Contoh penggunaan property list-style-type:

<html>
<head>
<title> Belajar List Style Type </title>
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
ol.aku { list-style-type: hiragana; }
ol.saya { list-style-type: katakana; }
ol.kamu { list-style-type: decimal-leading-zero; }
ol.dia { list-style-type: cjk-ideographic; }
</style>
</head>
<body>
Contoh Unordered List:
45
<ul class="a">
<li> Coffee </li>
<li> Tea </li>
</ul>
<ul class="b">
<li> Coffee </li>
<li> Tea </li>
</ul>
Contoh Ordered List:

<ol class="c">
<li>Coffee </li>
<li>Tea </li>
</ol>
<ol class="d">
<li> Coffee </li>
<li> Tea </li>
</ol>
<ol class="aku">
<li> Coffee </li>
<li> Tea </li>
</ol>
<ol class="saya">
<li> Coffee </li>
<li> Tea </li>
</ol>
46
<ol class="kamu">
<li> Coffee </li>
<li> Tea </li>
</ol>
<ol class="dia">
<li> Coffee </li>
<li> Tea </li>
</ol>
</body>
</html>
47
List Style Image

Property list-style-image digunakan untuk mengubah daftar list menjadi gambar. Misalkan yang
tadinya berbentuk bulatan hitam, dengan property ini diubah menjadi gambar. Bingung? Wkwkwk
Contohnya:
<html>
<head>
<title> Belajar List Style Image</title>
ul.gambar{
list-style-image:url(sqorange.gif);
}
</style>
</head>
<body>
Daftar Minuman Pagi ini:
<ul class=gambar>
<li> Kopi </li>
<li> Spirtus </li>
<li> Teh Sisri </li>
</ul>
</body>
</html>
48
CSS Styling Table

Peran tabel pada HTML sangtlah penting, dengan tabel kita dapat membuat layout website. Pada
pembahasan kali ini, penulis akan menjelaskan tentang penggunaan CSS Styling Table. Property
CSS yang digunakan untuk memformat tampilan tabel antara lain:
Tabel Border
Tabel Width & height
Tabel Text Alignment
Tabel Padding
Tabel Background-color
Tabel Border
Untuk memformat bingkai atau border pada tabel HTML, digunakan property border: value;
Contoh:
<html>
<head> <title> Belajar Tabel Border </title>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr> <th>Firstname</th> <th>Lastname</th> </tr>
<tr> <td>Virgiawan</td> <td>Listanto</td> </tr>
<tr> <td>Dwi</td> <td>Ambarwati</td> </tr>
</table>
</body>
</html>
49
Penjelasan:
Pada syntax CSS diatas, kita akan memformat tampilan tag <table>, <th>, dan <td> menjadi
berbingkai solid, berwarna black atau hitam, dan berukuran 1 pixel atau 1px. Silahkan dicoba
sendiri, dengan mengubah ukuran pixel dan warna border sesuai dengan yang kalian inginkan :)
Tabel Width & Height

Property width digunakan untuk memformat lebar tabel, sedangkan property height digunakan
untuk memformat tinggi tabel. Value atau Nilai dari property width dan height didefinisikan
dengan angka pixel (px) dan persen (%).
Contoh:
<html>
<head>
<title> Belajar Tabel Width Dan Height </title>
table {
border:6px solid green;
width:30%; height:100px;
}
td { border:1px solid black; }
</style>
50
</head>
<body>
<table>
</table>
</body>
</html>
Table Text Alignment

Ada dua property text aligment yang bisa digunakan pada CSS Styling Table. Yaitu: text-align, dan
vertical-align. Property text-align digunakan untuk membuat text didalam tabel menjadi rata
center, justify, left dan right. Sedangkan property vertical-align digunakan untuk membuat text
yang ada didalam tabel menjadi rata top, middle, atau bottom.
Property text-align = text akan diformat rata secara horizontal

Property vertical-align = text akan diformat rata secara vertical
Untuk membedakan antara text-align dan vertical-align, mari kita buat dua class yaitu .horizontal
dan .vertical, kemudian akan kita isi dengan value untuk masing-masing property aligment diatas.
Perhatikan bagian CSS yang disorot dengan background hijau tua pada skrip dibawah ini.
51
Contohnya:
<html>
<head>
<title> Belajar Tabel Text Alignment </title>
table {
}
.horizontal {
text-align: right;
}
.vertical {
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr> <td class=horizontal>Virgiawan</td> <td class=horizontal>Listanto</td> </tr>
<tr> <td class=vertical>Dwi</td> <td class=vertical>Ambarwati</td> </tr>
</table>
</body>
</html>
52
Value Property:
Text-align = right, center, justify, left
Vertical-align = top, bottom, middle, absmiddle, text-top, text-bottom
Table Padding
Property padding digunakan untuk mengatur jarak antara text kedalam kolom.
Contohnya:
<html>
<head>
<title> Belajar Tabel Padding </title>
table {
}
td {
border:1px solid black;
padding:50px;
}
</style>
</head>
53
<body>
<table>
</table>
</body>
</html>
Tabel Background Color

Dengan property background-color: kita dapat memberi warna background pada tabel.
Contohnya:
<html>
<head> <title> Belajar Tabel Background Color </title>
table {
}
54
td {
border:1px solid black;
padding:50px;
background-color: yellow;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
55
CSS Box Model

Kali ini kita akan membahas tentang CSS Box Model, Dengan CSS Box Model kita dapat membuat
tampilan Box dengan berbagai model sesuai dengan format css yang kita buat. Semua element
HTML umumnya dianggap sebagai Box (kotak). Dalam CSS, istilah Box Model dikaitkan dengan
perancangan design dan tata letak website.
CSS Box Model pada dasarnya adalah sebuah kotak yang membungkus element HTML. Yang terdiri
dari: margin, padding, border, dan content (isi kotak). Contoh CSS box model dapat digambarkan
seperti pada gambar dibawah ini:
Penjelasan:
Margin = Margin adalah area yang mengatur jarak antara kotak (box) dengan daerah diluarnya.
Border = Merupakan sebuah bingkai yang membatasi antara padding dan margin.
Padding = Padiing merupakan sebuah area yang ada didalam dan disekitar content (text),
Padding sendiri fungsinya adalah untuk mengatur jarak antara teks dan bingkai.
Content = Isi kotak, di mana teks dan gambar muncul.
56
Pada pembahasan kali ini, kita akan lebih sering menggunakan elemen HTML dinamis,
diantaranya: <div> dan <span>. Terutama untuk elemen <div>, dengan elemen <div>, kita juga bisa
membuat Layout atau template website dengan sentuhan CSS yang saat ini sedang kita pelajari.
CSS Border
Penggunaan property border: sebelumnya sudah kita pelajari, dan sekarang kita akan
mempelajarinya lagi secara advance. Property CSS border sebenarnya masih ada banyak lagi
turunannya, yaitu:
Border-style:
Border-width:
Border-color:
Border Individual Sides
border-left:
border-top:
border-right:
border-top:
Border Style
Dengan property border-style kita dapat membuat berbagai macam jenis bingkai (border).
Diantaranya: dotted, dashed, solid, double, groove, ridge, inset, dan outset.
Dotted
Border Dotted didefinisikan dengan value dotted didalam property border-style: tampilan
bingkai dotted sendiri adalah sebagai berikut:
Dashed
Border Dashed didefinisikan dengan value dashed didalam property border-style: tampilan
bingkai dashed sendiri adalah sebagai berikut:
57
Solid
Border Solid didefinisikan dengan value solid didalam property border-style: tampilan bingkai
solid sendiri adalah lurus tanpa ada tanda titik-titik, sebagai berikut:
Double
Border Double didefinisikan dengan value double didalam property border-style: tampilan
bingkai double seperti solid namun tampak dua atau dobel, lebih jelasnya sebagai berikut:
Groove
Border Groove didefinisikan dengan value groove didalam property border-style: tampilan
bingkai groove seperti Nampak 3D, kita juga dapat memberikan effect dengan perpaduan property
border-color: lebih jelasnya dapat dilihat sebagai berikut:
Ridge
Border Ridge didefinisikan dengan value ridge didalam property border-style: tampilan bingkai
ridge seperti Nampak 3D hampir sama dengan Groove, namun ridge pada sisi atasnya tampak
cerah dan tida gelap seperti groove. kita juga dapat memberikan effect dengan perpaduan
property border-color: lebih jelasnya dapat dilihat sebagai berikut:
58
Inset
Border Inset didefinisikan dengan value inset didalam property border-style: tampilan bingkai
inset seperti Nampak 3D, namun inset pada sisi atasnya tampak gelap dan menjorok kedalam. kita
juga dapat memberikan effect dengan perpaduan property border-color: lebih jelasnya dapat
dilihat sebagai berikut:
Outset
Border Outset didefinisikan dengan value outset didalam property border-style: tampilan
bingkai outset seperti Nampak 3D sama seperti inset, namun outset pada sisi atasnya tampak
cerah sedangkan sisi bawahnya gelap. kita juga dapat memberikan effect dengan perpaduan
property border-color: lebih jelasnya dapat dilihat sebagai berikut:
Border Width
Property border-width memungkin kita untuk memformat lebar bingkai. Value property borderwidth ditentukan oleh nilai pixel. Atau bisa juga menggunakan definisi 3 value yaitu: thin, medium
atau thick. Ingat! Property border-width tidak akan bekerja jika digunakan sendiri. Harus ada
property border-style: untuk mengatur jenis bingkainya.
Contoh:
<html>
<head>
<title> Belajar CSS Box Model </title>
p{
border-style: groove;
border-width: 6px;
}
59
div {
border-style: dashed;
border-width: 2px;
}
</style>
</head>
<body>
<p> Testing CSS Box Model Groove </p>
<div> Testing CSS Box Model Dashed </div>
</body>
</html>
Border Color
Dengan Property border-color kita dapat memformat penggunaan warna pada border. Pemberian
warna border dapat didefinisikan dengan code nama warna, atau dengan code hexadesimal.
60
Contoh:
<html>
<head>
<title> Belajar CSS Box Model 2</title>
p{
border-style: groove;
border-width: 6px;
border-color: green;
}
div {
border-style: dashed;
border-width: 2px;
border-color: #ff0000;
}
</style>
</head>
<body>
<div> Testing CSS Box Model Dashed </div>
</body>
</html>
61
Border Individual Side

Yang namanya kotak pasti memiliki 4 sisi, nah yang dimaksud border individual side adalah
empat property border yang mendefinisikan dirinya secara individu. Yaitu border-left (sisi kiri),
border-right (sisi kanan), border-top (sisi atas), dan border-bottom (sisi bawah).
Ke empat property tersebut juga masih memiliki turunan property untuk menentukan model
border dan warna border, yaitu:
border-left-style, border-right-style, border-top-style, border-bottom-style.
border-left-color, border-right-color, border-top-color, border-bottom-color.
Contoh:
<html>
<head>
p{
border-width: 3px;
border-bottom-style: groove;
border-bottom-color: green;
border-top-style: dashed;
border-top-color: red;
border-left-style: solid;
border-left-color: blue;
border-right-style: inset;
border-right-color: yellow;
}
</style>
</head>
62
<body>
</body>
</html>
CSS Border Shorthand Property

Dalam menuliskan syntax css, ada sebuah trik yang dinamakan shorthand property. Shorthand
property adalah teknik menyederhanakan penulisan property menjadi satu. Contohnya:
.virgi{ border: 1px dashed red }
Artinya, kita akan membuat selector class bernama .virgi, dengan property border: yang
didalamnya terdapat value: 1px dashed dan red Value 1px adalah value yang diambil dari
property border-width, Value dashed adalah jenis border yang didapat dari property borderstyle, sedangkan value red mendefinisikan border dengan warna merah, yang diambil dari
property border-color.
Jadi dengan teknik Shorthand Property kita dapat menuliskan beberapa property dalam satu
property utama. Kan, diawal sudah di bilang, bahwa CSS adalah bahasa stylesheet yang dapat
membentuk hubungan antara ayah-anak (parent-child).
63
Contoh:
<html>
<head>
p{
border: 2px dashed blue;
}
</style>
</head>
<body>
</body>
</html>
64
BAB V CSS Reference

Alhamdulilah kita sudah sampai pada bab terakhir, pada bab ini penulis akan memberikan
referensi CSS yang penulis dapat dari website http://www.w3schools.com/cssref/default.asp
CSS Selector Reference

Selector
Contoh
Deskripsi
.class
.virgi
Mendefinisikan selector Class dengan diawali tanda titik
#id
#virgi
Mendefinisikan selector ID dengan diawali tanda pagar
element
element, element
p, h1, h2
Mendefinisikan element HTML sebagai selector

Mendefinisikan penggunaan banyak element HTML
sebagai selector dengan dipisahkan oleh tanda koma
element.class
p.virgi
element#id
p#id
Mendefinisikan element HTML dan Class sebagai selector

Mendefinisikan element HTML dan ID sebagai selector
CSS Property Reference

Property CSS
Deskripsi
CSS Background
background
Mendefinisikan Property background utama
background-color
Mendefinisikan penggunaan warna background
background-image
Mendefinisikan penggunaan background bergambar
background-position
background-repeat
Mendefinisikan penggunaan posisi background

Mendefinisikan penggunaan pengulangan background
CSS Border
border
border-bottom
border-bottom-color
Mendefinisikan penggunaan bingkai border

Mendefinisikan penggunaan bingkai bagian bawah
Mendefinisikan warna bingkai bagian bawah
65
border-bottom-width
Mendefinisikan lebar bingkai bagian bawah
Border-bottom-style
Mendefinisikan jenis bingkai bagian bawah
border-color
border-left
Mendefinisikan warna bingkai

Mendefinisikan bingkai bagian kiri
border-left-color
Mendefinisikan warna bingkai bagian kiri
border-left-style
Mendefinisikan jenis bingkai bagian kiri
border-left-width
Mendefinisikan lebar bingkai bagian kiri
border-right
Mendefinisikan bingkai kanan
border-right-color
Mendefinisikan warna bingkai bagian kanan
border-right-style
Mendefinisikan jenis bingkai bagian kanan
border-right-width
Mendefinisikan lebar bingkai bagian kanan
border-style
Mendefinisikan jenis bingkai (model bingkai)
border-top
Mendefinisikan bingkai bagian atas
border-top-color
Mendefinisikan warna bingkai bagian atas
border-top-style
Mendefinisikan jenis bingkai bagian atas
border-top-width
Mendefinisikan lebar bingkai bagian atas
border-width
Mendefinisikan lebar bingkai

CSS Color
color
Mendefinisikan warna text

CSS Dimension
height
Mendefinisikan tinggi
width
Mendefinisikan lebar
66
CSS Font
font-family
Mendefinisikan jenis huruf
font-size
Mendefinisikan ukuran huruf
font-style
Mendefinisikan gaya huruf
font-weight
Mendefinisikan ketebalan huruf

CSS List
list-style
list-style-image
list-style-type
Mendefinisikan penggunaan list

Mendefinisikan penggunaan gambar untuk list
Mendefinisikan penggunaan tipe list
CSS Margin
margin
margin-bottom
Mendefinisikan Margin
Mendefinisikan margin bawah
margin-left
Mendefinisikan margin kiri
margin-right
Mendefinisikan margin kanan
margin-top
Mendefinisikan margin atas

CSS Padding
padding
padding-bottom
Mendefinisikan padding
Mendefinisikan padding bawah
padding-left
Mendefinisikan padding kiri
padding-right
Mendefinisikan padding kanan
padding-top
Mendefinisikan padding atas

CSS Text
line-height
Mendefinisikan ketinggian jarak antar teks
67
text-align
Mendefinisikan rata text
text-decoration
Mendefinisikan dekorasi text
text-transform
Mendefinsikan transformasi text
vertical-align
Mendefinisikan rata text secara vertical
Sumber Referensi Belajar CSS Yang Terpercaya

http://www.w3schools.com/css/default.asp
http://www.w3schools.com/cssref/default.asp
http://belajarcss.com
68
Biografi Penulis
PHP dan MySQL, Miniw0rm CMS berlisensi open source, artinya siapa saja boleh memodifikasinya
serta menggunakannya sesuai dengan keinginan masing-masing. Miniw0rm CMS dibuat dengan
model programming for future, artinya semua code yang ditulis dengan teknik pemrograman
yang mereka gunakan. Menguasai bahasa pemrograman dan bahasa scripting berbasis website
seperti: PHP, CSS, XHTML, Javascript, JQuery, Ajax, XML dan MySQL.
Contact Person

Web Design, Web Master, Dan Web Hosting
Oleh:
Virgiawan Listanto
Lisensi Dokumen:
Daftar Isi
Biografi Penulis
Lisensi Dokumen
Pendahuluan
BAB I Web Design

Hal-Hal Yang Harus Diketahui
Menentukan Tema Website
Menggambar Rancangan Layout Website
Modeling Website
Usability
Menu Navigasi
Tombol Home
LINK
Graphic Navigation Link
Jumlah Kolom Pada Website
Header dan Footer
Contoh Gambaran Perancangan Layout Web Dengan Teknik Modeling Website
Konsep Pewarnaan Website
Triplet RGB
Warna-Warna Pada HTML
Warna-Warna X11
Warna-Warna Yang Aman Untuk Website
Warna-Warna Yang Benar-Benar Aman Untuk Website
Warna-Warna CSS
Dasar-Dasar Pemilihan Warna
Konsep Tipografi Website
Sejarah Tipografi
Jenis-Jenis Huruf Tipografi
Tipografi Dalam Dunia Web Design
Teknik Slicing Image
BAB II Web Master

Definisi Web Master
Web Arsitek
Web Designer
Web Programmer
Web Administrator
Web Security
Web Developer
Web Master
BAB III Web Hosting

Apa yang dimaksud dengan Web Hosting?
Siapa saja yang membutuhkan Web Hosting?
Mengapa Perlu Web Hosting?
Kapan anda membutuhkan Situs Web?
Dimana menyewa Web Hosting?
Teknologi apa yang digunakan?
Bagaimana cara Mengelola Web Hosting?
Bagaimana cara membuat server webhosting?
Pendahuluan
Hay Guys ! :D Jumpa lagi bersama saya disini, kali ini kita akan mempelajari tentang web design,
web master, dan web hosting. Buku ini merupakan lanjutan dari buku sebelumnya yang berjudul
Lesson 1: Internet Dan Website. Setelah kalian mengetahui seluk beluk internet dan website,
kini saatnya kalian terjun ke dunia web design, web master, dan web hosting. Are You Ready?
BAB I - Web Design

Apa itu web design? Web Design adalah suatu bidang yang mempelajari pembuatan website,
mulai dari menentukan perancangan website, desain website, pewarnaan website, tipografi
website, usability website, dan slicing image website. Menurut Wikipedia.org, Secara umum web
design merupakan istilah yang mencakup bagaimana isi website ditampilkan, (biasanya berupa
hypertext atau hypermedia) yang dikirimkan kepada pengguna internet melalui World Wide Web
dengan menggunakan sebuah browser atau perangkat lunak berbasis web.
Tujuan dari web design adalah membuat website termasuk dokumen dan aplikasi yang ada
didalam web server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten
lainnya, serta dapat bersifat statis ataupun dinamis.
Hal-Hal Yang Harus Diketahui

Dalam dunia web design, para desainer yang ingin membangun sebuah website pastinya harus
mengetahui dulu hal-hal yang berkaitan dengan pembuatan website. Sepengalaman penulis, ada 6
hal yang harus diketahui, hal-hal tersebut antara lain:
Melakukan Perancangan Layout Website
Memahami Konsep Modeling Layout Website
Memahami Konsep Pewarnaan Website
Memahami Konsep Tipografi Website
Memahami Teknik Slicing Image

Sebelum melakukan pembuatan website, hal yang harus dilakukan adalah menentukan tema.
Tema website dapat kita pahami dari Tipe atau kategori website yang sudah kita bahas pada
buku sebelumnya. Misalnya saya ingin membuat website pribadi, maka tema yang saya ambil
adalah web personal. Contoh lain misalkan saya ingin membuat toko online, maka tema yang saya
ambil adalah Web E-Commerce, dan seterusnya, dan seterusnya, sampai nabrak! Wkwkwk
Menggambar Rancangan Layout Website

Setelah menentukan tema, hal yang harus dilakukan adalah menggambar rancangan
Layout/template website. Dalam merancang sebuah template, umumnya web designer melakukan
aktifitas yang dinamakan Corat-Coret Layout. Aksi Corat coret layout ini merupakan aktifitas
yang dilakukan untuk membuat bentuk atau model template yang akan digunakan. Namun, dalam
menggambar rancangan Layout/template juga harus ada aturannya dan tidak boleh asal-asalan.
Aturan yang penulis maksud adalah Modeling Website.
Modeling Website
Modeling website adalah teknik penentuan tata letak template. Pemodelan website merupakan
awal dari terbentuknya interfaces website. Didalam pemodelan website, ada beberapa hal yang
harus diketahui, antara lain:
Usability
Menu Navigasi
Link
Jumlah kolom pada website
Header Dan Footer
Usablility (Dapat Digunakan)

Website yang baik adalah website yang dapat digunakan baik dari segi loading, navigasi, dan tata
letak template. Usability diperlukan agar tidak menyesatkan pengunjung. Akhir-akhir ini sering
saya jumpai beberapa website yang loadingnya sangat lelet, sehingga membuat saya hengkang
dari website tersebut.
Ada juga website yang memiliki terlalu banyak animasi flash dan iklan, tentu sangat risih bukan
Ketika kita ingin mencari informasi, eh.. malah dihadapkan pada tampilan seperti itu. Kemudian
ada lagi website yang desainnya sangat bagus, namun akhirnya saya hengkang juga dari website
itu, karena image yang ada pada website tersebut resolusinya terlalu besar dan lama waktu
loadingnya.
Jadi, dapat kita simpulkan bahwa Usability pada website sangat mutlak dipahami dan
direalisasikan. Sehingga pengunjung yang datang ke website kita, bisa betah berlama-lama
mencari informasi. Tips dari saya agar usability website anda berjalan dengan optimal adalah:
hindari penggunaan gambar dan animasi flash yang berlebihan. Cukup 1 atau 2 animasi saja
yang dianggap perlu untuk dipajang diwebsite anda, optimalkan juga resolusi gambar yang tinggi
menjadi resolusi rendah, supaya pada saat loading tidak menunggu terlalu lama.
Menu Navigasi
Navigasi yang ada pada website harus wajib dibuat, jika tidak ada menu navigasi pengunjung yang
datang pasti akan kebingungan untuk berpindah dan menjelajah kehalaman lain yang ada pada
website tersebut. Menu Navigasi dapat diartikan sebagai sekumpulan link yang tersusun rapih dan
difungsikan sebagai tombol pengontrol halaman-halaman website. Menu navigasi umumnya dapat
berbentuk text atau gambar yang berbentuk tombol.
Contoh Menu Navigasi

Tombol Home
Tombol Home sudah sangat familiar ditelinga kita, tombol ini berfungsi untuk kembali ke halaman
awal. Tips: Pastikan anda menyertakan tombol home pada struktur menu navigasi disitus anda.
LINK
Link merupakan sekumpulan text atau gambar yang berfungsi sebagai tombol navigasi pada
website. Dengan adanya LINK, pengunjung dapat menjelajah dan berpindah dari halaman satu
kehalaman lain di website anda. Umumnya sebuah link ditandai dengan garis bawah yang
berwarna biru. Namun karena selera orang berbeda-beda, maka sebuah link yang tadinya ditandai
dengan garis bawah berwarna biru dapat disulap menjadi sebuah tombol image, atau text yang
memiliki warna sesuai dengan selera. Link yang bergaris bawah dan berwarna biru dinamakan
Default Link, sedangkan Link yang sudah dimodifikasi dinamakan Link Style. Bentuk link bisa
dicontohkan pada pembahasan menu navigasi yang sudah kita bahas diatas.
LINK hanya mengenal 2 target yaitu _blank dan _none/tanpa target. Link yang memiliki target
_blank berfungsi untuk membuat jendela Tab baru pada browser, sedangkan link yang memiliki
target _none/tanpa target berfungsi untuk melakukan perpindahan halaman pada jendela tab
yang sama di browser.
Link yang memiliki target _blank dinamakan (External Link), sedangkan Link yang tidak memiliki
target dinamakan (Internal Link). External Link umumnya dibuat untuk diarahkan ke website lain
atau halaman lain yang otomatis membuat jendela tab baru di browser.
Contoh External Link

Sebuah Link tidak hanya berbentuk text biasa, namun juga dapat berbentuk sebuah tombol yang
menyerupai gambar. Graphic Navigation Link adalah sebuah menu navigasi yang berbentuk
graphic atau gambar.
Penggunaan Graphic Navigation Link dipercaya memiliki daya tarik tersendiri bagi para
pengunjung website. Menu navigasi yang berbentuk grafik dapat juga berbentuk tombol animasi,
tombol animasi biasanya dibuat dengan bantuan software pengolah citra seperti adobe
photohsop, adobe image ready, atau software pengolah animasi seperti adobe flash.
Contoh Graphic Navigation Link
Jumlah Kolom Pada Website

Dalam pemodelan website, jumlah kolom maksimal untuk menaruh isi berita, menu, dan
komponen-komponen lain adalah 3 kolom. Namun karena selera tiap desainer berbeda-beda,
mereka dapat membuat 4 kolom atau lebih yang sudah didesain sedemikian rupa agar website
terlihat cantik dan mempesona. Jumlah kolom minimal pada standar desain website adalah 2
kolom, 1 kolom untuk menu navigasi, dan 1 kolom lagi untuk isi informasi. Tips dari saya: Jika ingin
membuat website yang memiliki banyak menu navigasi, gunakanlah format 3 kolom. Sedangkan
jika ingin membuat website yang memiliki sedikit menu navigasi, gunakan format 2 kolom standar.
Contoh Layout Website 2 Kolom
10
Header Dan Footer

Header dan Footer yang terdapat pada website sangat penting untuk dibuat, jika tidak ada header
sebuah website akan tampak aneh. Begitu pula jika tidak ada footer, sebuah website yang tidak
memiliki footer akan terlihat biasa-biasa saja. Terkadang hal ini sering dianggap sepele oleh
beberapa desainer website. Padahal kalau dimanfaatkan dengan baik, header dan footer akan
menjadi nilai plus bagi pembuatnya. Header umumnya digunakan untuk meletakan nama website,
slogan website, banner, atau logo. Sedangkan footer digunakan untuk meletakkan infromasi
copyright, alamat, link navigasi contact us dan lain sebagainya.
Contoh Gambaran Perancangan Layout Web Dengan Teknik Modeling Website

Sekarang kita sudah mengetahui konsep perancangan layout menggunakan teknik modeling
website, selanjutnya penulis akan memberikan contoh-contoh layout website yang nantinya akan
berguna sebagai referensi example layout kalian. Berikut beberapa contoh layout website sesuai
dengan jumlah kolom, tata letak, menu navigasi, serta header dan footer.
11
12
Contoh Layout Website 2 Kolom Dengan Menu Navigasi Di Kanan
Contoh Layout Website 2 Kolom (Menu Navigasi Di Kanan + Banner)
13
Contoh Layout Website 3 Kolom Dengan Menu Navigasi Di Kanan + Menu Top
Contoh Website 3 Kolom Dengan Menu Top + Menu Navigasi kiri dan kanan
14
Konsep Pewarnaan Website

Warna adalah nyawa dari website. Tanpa adanya warna, website tidak akan terlihat cantik dan
indah. Seorang web designer bebas menentukan warna yang akan digunakan untuk mewarnai
websitenya. Menurut Wikipedia.org . Warna-warna website dapat dispesifikasikan menggunakan
Triplet RGB dalam format Hexadecimal atau bisa disebut juga dengan triplet hexsadecimal. Cara
lain memberikan warna website adalah dengan mereferensikan warna-warna tersebut kedalam
bahasa inggris. Akan tetapi cara ini berlaku sangat terbatas pada warna-warna yang telah dikenal
atau dirumuskan. Untuk variasi-variasi warna lain umumnya dibutuhkan Software grafik seperti
adobe photoshop, yang didalamnya memiliki Color Picker (Peralatan Warna) untuk membuatnya.
Triple RGB
Triplet RGB terdiri dari enam buah karakter heksadesimal yang tiap dua per dua karakternya
menyatakan entitas dari Red (merah), Green (hijau), dan Blue (biru). Nilai-nilai yang dapat diisikan
untuk tiap-tiap entitas RBG adalah mulai dari 00 sampai FF. Atau dalam bentuk angka desimal 0
sampai 255.
Triplet RGB Color
Tiap dua karakter dari R, G, dan B dapat di representasikan dalam satu byte (delapan bit), sehingga
RGB sendiri dapat di representasikan menjadi suatu entitas berukuran 3 byte, yaitu:
15
byte 1: Nlai merah (R)

byte 2: Nilai hijau (G)
byte 3: Nilai biru (B)
Akan tetapi cara ini umumnya digunakan dalam menyimpan informasi pada berkas grafik atau
gambar dan tidak lazim digunakan dalam dokumen HTML. Walaupun demikian pengertian ini
sangat mutlak diperlukan, mengingat batasan nilai yang dapat diisikan untuk tiap entitas RGB
diturunkan dari batasan ukuran byte, yang dulunya hanya 8 bit (0-255 atau 00-FF). Meskipun
adanya batasan tersebut, jumlah warna yang dapat ditampilkan menggunakan sistem pewarnaan
ini sudah cukup banyak, yaitu: 256 x 256 x 256 = 16.777.216. Dengan kata lain, lebih dari 16 juta
warna dapat di representasikan dengan cara ini.
Warna-Warna Padan HTML

Spesifikasi HTML 4.01 mendefinisikan memiliki enam belas warna. Warna-warna ini juga
dispesifikasikan sebagai RGB dalam HTML 3.0 dengan catatan warna-warna ini berasal dari standar
16 warna yang didukung oleh VGA Windows.
16
Warna-Warna X11
Sebagai tambahan, sejumlah warna didefinisikan oleh beberapa browser seperti Internet Explorer
atau Mozilla Firefox. Suatu web browser mungkin tidak dapat mengenali semua warna ini, akan
tetapi sejak tahun 2005 semua browser modern mendukung secara lengkap warna-warna yang
telah terdaftar. Warna-warna ini diambil dari daftar warna X11 yang didistribusikan bersama
sistem X Window. Warna-warna X11 memiliki 141 nama-nama warna, antara lain:
Warna-Warna Merah (9)
Warna-Warna Pink (6)
17
Warna-Warna Jingga (6)
Warna-Warna Kuning (11)
18
Warna-Warna Ungu (17)
19
Warna-Warna Hijau (23)
20
Warna-Warna Biru (25)
21
Warna-Warna Coklat (17)
22
Warna-Warna Putih (17)
Warna-Warna Abu-Abu (10)
23
Warna-Warna Yang Aman Untuk Website

Warna-warna yang aman untuk website umumnya memiliki 216 warna, yang dulunya
dikembangkan pada saat komputer hanya dapat menyajikan 256 warna. Warna-warna ini dipilih
secara khusus karena cocok dengan warna yang digunakan oleh kebanyakan web browser terkini.
Warna-warna yang aman untuk website tidak memiliki nama warna, tetapi tiap warnanya dapat
dispesifikasikan dengan triplet RGB. Tiga digit triplet RGB (tiga karakter hexadecimal) digunakan
sebagai kependekan dari triple RGB yang terdiri dari enam digit (enam kerakter heksadesimal). CSS
atau Cascading Style Sheet mendukung kedua format ini, baik triplet RGB yang bertipe tiga digit
maupun enam digit. Pada tabel berikut ini disajikan warna-warna yang aman untuk website dan
tersusun atas 3 digit.
24
Warna-Warna Yang Benar-Benar Aman Untuk Website

Perancang website umumnya disarankan untuk tetap menggunakan warna-warna aman dalam
situs website mereka. David Lehn dan Hadley Stern sejak saat itu menemukan bahwa hanya ada
22 warna dari 216 warna yang dapat dipercaya untuk ditampilkan tanpa ketidak-konsistenan pada
tampilan komputer dengan kedalaman warna 16-bit. Mereka menamakan 22 warna ini sebagai
palet warna yang "benar-benar aman". Palet tersebut terdiri dari sebagian besar tingkatan warna
hijau dan kuning. Warna-warna yang dimaksud ditabelkan pada gambar berikut ini.
Warna-Warna CSS
Bahasa Cascading Style Sheet mendefinisikan jumlah warna yang sama dengan warna-warna pada
HTML 4. Sebagai tambahan CSS 2.1 menambahkan warna 'orange' pada daftar tersebut.
25
Dasar-Dasar Pemilihan Warna

Dikutip dari Ebook: Merancang Web pada situs www.slametriyanto.net
Pemilihan warna untuk website akan memiliki kesan tersendiri bagi pembuatnya, dan hanya
pembuatnya sendiri yang mengetahui makna dari pemilihan warna tersebut. Berikut ini adalah
warna-warna yang umumnya digunakan dan masing-masing warna memiliki makna positif dan
negatif. Dasar pemilihan warna website dikelompokan menjadi tiga, yaitu: Warna sejuk, warna
Hangat, dan Netral.
Warna-Warna Sejuk: Biru, Hijau, Ungu, dan Perak. Warna-warna sejuk cenderung berpengaruh
memberikan perasaan tenang bagi yang melihatnya. Meskipun digunakan sendiri, warna-warna ini
bisa mempunyai rasa dingin atau impersonal, Berikut ini makna dari warna dalam kategori sejuk.
Biru
- Positif: keheningan, mencintai, kesetiaan, rasa aman, percaya, intelligence.
- Negatif: kedinginan, ketakutan, kejantanan,
Hijau
- Positif: pertumbuhan, kesuburan, kesegaran, (penyembuhan/pengobatan), healing, keteduhan,
- Negatif: iri hati, kecemburuan, kesalahan, kekacauan,
Ungu
Ungu adalah kombinasi biru dan merah, oleh sebab itu ditemukan baik didalam kategori warna
hangat maupun sejuk.
- Positif: raja, kaum ningrat, spirituality, kemewahan, ambition

- Negatif: misteri, kemasgulan
Perak
- Positif: glamor, tinggi, anggun, halus dan rapi (sleek).
- Negatif: pengkhayal, tidak tulus.
26
Warna-Warna Hangat: Merah, merah muda, kuning, orange, ungu, dan emas. Warna hangat
cenderung mempunyai suatu efek kegairahan bagi yang melihatnya. Oleh karena itu ketika warna
ini digunakan dapat menstimulasi, membangitkan emosi kekerasan/kehebatan dan kemarahan.
Berikut ini makna dari warna hangat:
Merah
- Positif: cinta, energi, kuasa, kekuatan, penderitaan, panas.
- Negatif: kemarahan, bahaya, peringatan, ketidaksabaran.
Merah muda
- Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka melucu.
- Negatif: kelemahan, kewanitaan, ketidak dewasaan.
Kuning
- Positif: terang/cerdas, energi, matahari, kreativitas, akal, bahagia.
- Negatif: penakut, tidak bertanggungjawab, tidak stabil.
Orange
- Positif: keberanian, kepercayaan, kehangatan/keramahan, keakraban, sukses.
- Negatif: ketidak-tahuan, melempem, keunggulan.
Ungu
Warna ungu ditemukan di dalam kedua-duanya warna dingin dan hangat.
- Positif: royalti, kebangsawanan, kerohanian, kemewahan, ambisi.
- Negatif: kegaiban, kemurungan.
Emas
- positif: kekayaan, kemakmuran, berharga, tradisional.
- negatif: ketamakan, pemimpi.
27
Warna-Warna Netral: Coklat, berwarna coklat, kelabu, putih dan hitam. Warna netral adalah
suatu pemilihan agung untuk bergaul dengan suatu palet (lukis) hangat atau dingin. warna-warna
netral sangat baik untuk latar belakang dalam suatu situs. Tambahkan warna hitam untuk
menciptakan suatu yang lebih gelap dan keteduhan tentang suatu warna utama. Berikut
beberapa makna dari warna netral:
Hitam
- Positif: perlindungan, dramatis, serius, bergaya/anggun, formalitas.
- Negatif: kerahasiaan, kematian, kejahatan/ malapetaka, kegaiban.
Abu-abu
- Positif: keamanan, keandalan, kecerdasan/inteligen, padat, konservatif.
- Negatif: muram, sedih, konservatif.
Coklat
- Positif: ramah, bumi, keluar rumah, umur panjang, konservatif.
- Negatif: dogmatis, konservatif.
Putih
- Positif: kebaikan, keadaan tak bersalah, kesucian, segar, gampang, bersih.
- Negatif: musim dingin, dingin, jauh.
Konsep Tipografi Website

Menurut Wikipedia.org, Tipografi adalah Ilmu yang mempelajari tentang Huruf dan penggunaan
Huruf dalam desain komunikasi visual untuk menciptakan kesan tertentu, sehingga dapat
menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.
Sejarah Tipografi
Sejarah perkembangan tipografi dimulai dari penggunaan pictograph. Bentuk bahasa ini digunakan
oleh bangsa Viking Norwegia dan Indian Sioux. Kemudian dinegara Mesir berkembang jenis huruf
yang bernama Hieratia, huruf hieratia terkenal dengan nama Hieroglif pada sekitar abad 1300 SM.
28
Bentuk tipografi ini merupakan akar dari bentuk Demotia yang ditulis menggunakan pena khusus.
Bentuk tipografi akhirnya berkembang sampai di Kreta, lalu menjalar ke Yunani dan akhirnya
menyebar keseluruh Eropa.
Puncak perkembangan tipografi, terjadi kurang lebih pada abad 8 sebelum masehi di Roma saat
orang Romawi mulai membentuk kekuasaannya. Karena bangsa Romawi tidak memiliki sistem
penulisan sendiri, mereka mempelajari sistem penulisan Etruska yang merupakan penduduk asli
Italia serta menyempurnakannya sehingga terbentuklah huruf-huruf Romawi.
Saat ini tipografi mengalami perkembangan dari fase penciptaan dengan tangan hingga mengalami
komputerisasi. Fase komputerisasi membuat penggunaan tipografi menjadi lebih mudah dengan
jenis pilihan huruf yang jumlahnya mencapai ratusan.
Jenis huruf Tipografi

Secara garis besar huruf-huruf tipografi digolongkan menjadi:
Roman, pada awalnya adalah kumpulan huruf-huruf kapital seperti yang biasa ditemui di pilar dan
prasasti Romawi, namun kemudian berkembang menjadi keseluruhan huruf yang mempunyai ciri
tegak dan didominasi garis lurus kaku.
Serif, memiliki ciri siripan di ujungnya. Selain membantu keterbacaan, siripan juga mempermudah
saat huruf diukir ke batu. Contoh penggunaan huruf bersirip antara lain berada dinisan Johanna
Christine, Museum Taman Prasasti.
Contoh penggunaan huruf bersirip di nisan Johanna Christine, Museum Taman Prasasti
29
Egyptian, atau populer dengan sebutan slab serif. Cirinya adalah kaki/sirip/serif yang berbentuk
persegi seperti papan dengan ketebalan yang sama. Kesan yang ditimbulkan Egyptian adalah
kokoh, kuat, kekar dan stabil.
contoh huruf slab serif di nisan Thomas de Souza, di pintu masuk Museum Taman Prasasti
Sans Serif, memiliki ciri tanpa sirip/serif, dan memiliki ketebalan huruf yang. Kesan yang
ditimbulkan oleh huruf jenis ini adalah modern, kontemporer dan efisien.
Script, merupakan goresan tangan yang dikerjakan dengan pena, kuas atau pensil tajam, dan
biasanya miring ke kanan.
Miscellaneous, merupakan pengembangan dari bentuk-bentuk huruf yang sudah ada. Ditambah
hiasan dan ornamen, atau garis-garis dekoratif. Kesan yang ditimbulkan adalah dekoratif dan
ornamental.
Tipografi Dalam Dunia Web Design

Penggunaan font (huruf) dalam dunia web design berbeda dengan penggunaan font pada desain
grafis. Dalam bidang desain grafis, kita bebas menentukan jenis font apa saja, baik yang bentuknya
unik, asik, atau menarik. Karena hasil akhirnya adalah berbentuk cetak (print). Berbeda dengan
penggunaan font pada web design, sebab tidak semua font bisa ditampilkan di web browser.
Berikut adalah beberapa font yang umumnya digunakan didunia web design:
Time News Roman

Arial
30
Teknik Slicing Image

Slicing adalah teknik memotong-motong gambar menjadi beberapa bagian dari ukuran yang besar
menjadi ukuran yang kecil. Hal ini dilakukan untuk mengoptimasi loading website. Teknik slicing
image biasanya dilakukan pada tahap akhir perancangan dan pendesainan layout website, Slicing
bisa dilakukan menggunakan software pengolah citra seperti adobe photoshop. Selain itu, dengan
melakukan proses slicing, kita dapat menentukan kualitas format gambar yang sesuai untuk
optimasi loading website. Misalnya saya memiliki gambar banner dengan ukuran 924 Kb,
kemudian gambar tersebut saya optimalkan dengan proses slicing, pada tahap ini saya berhak
menentukan format gambar apa yang akan digunakan misalnya GIF, PING, atau JPG, dengan
berpatokan pada ukuran Kilo byte yang paling rendah sesuai dengan formatnya masing-masing.
Tips! Untuk gambar-gambar yang memiliki panjang dan lebar yang besar, disarankan
menggunakan format JPG, untuk gambar yang tidak memiliki background disarankan
menggunakan format PNG, dan untuk gambar-gambar yang ringan seperti background website,
background menu, dan sebagainya disarankan wajib menggunakan format GIF.
Contoh pada saat proses slicing image
31
BAB II - Web Master

Dibalik layar, peran seorang web master sangat penting untuk diketahui, dengan kehadiran
mereka situs-situs yang bertebaran di internet tercipta satu persatu. Mulai dari situs yang sangat
sederhana, hingga situs-situs yang dapat membuat kita terkagum-kagum, entah karena desain
website yang dibuat begitu indah, atau karena program aplikasi yang diciptakan begitu interaktif.
Profesi ini bisa dibilang menggiurkan bagi sebagian orang, perkembangan internet yang begitu
cepat menyebabkan beberapa orang ingin terjun dan menekuni profesi ini. Tidak perlu pendidikan
khusus untuk menjadi seorang web master, bahkan orang yang belum mengerti apa-apa bisa juga
menjadi web master jika mereka mau belajar secara otodidak. Kebanyakan web master mengawali
profesi ini dari hobi, kecintaan mereka terhadap bidang desain dan programming menjadi senjata
ampuh untuk berevolusi menjadi web master yang maju dan sukses. Namun, apakah kalian tahu,
kalau web master sebenarnya terpecah-pecah menjadi beberapa bagian? Berikut ini adalah
definisi web master sesuai dengan bagian dan tugasnya masing-masing.
Web Arsitek
Web Arsitek adalah orang yang membangun rancangan website seperti halnya arsitek bangunan.
Untuk menjadi web arsitek diperlukan pengetahuan khusus tentang tipe-tipe dan model-model
website, serta pemahaman akan konsep modeling website, sehingga dapat menciptakan skema
situs yang baik. Biasanya web arsitek disewa oleh pengembang web untuk situs-situs besar dan
tentunya memiliki perancangan khusus.
Web Designer
Web Designer adalah orang yang bertugas mendesain halaman-halaman website, untuk menjadi
seorang web designer tentunya harus memiliki jiwa seni yang tinggi. Kalau tidak, sudah pasti
desain website yang dihasilkan akan nampak kasar dan tidak begitu indah. Hal-hal yang harus
dikuasai untuk menjadi seorang web designer adalah: konsep desain website, konsep modeling
website, pewarnaan (coloring), tata letak gambar, tipografi yang digunakan, teknik slicing,
penguasaan software pengolah citra seperti adobe photoshop, penguasaan software editing
website seperti dreamweaver, penguasaan bahasa markup HTML, Stylesheet CSS, dan scripting
language javascript.
32
Web Programmer
Web Programmer adalah orang yang bertugas untuk membuat aplikasi website berjalan secara
dinamis dan interaktif. Biasanya web programmer bekerja setelah web designer rampung
menyelesaikan desain halaman website. Hal-hal yang harus dikuasai untuk menjadi seorang web
programmer adalah: memahami algoritma dan flowchart pemrograman, memahami salah satu
bahasa pemrograman website seperti PHP, memahami salah satu database (basis data) seperti
MySQL, memahami bahasa markup HTML, Stylesheet CSS, Scripting language Javascript, dan tidak
menutup kemungkinan memahami penggunaan framework PHP seperti: Cake PHP, Codeigneiter,
atau Zend PHP.
Web Administrator
Web Administrator adalah orang yang bertanggung jawab atas jalannya sebuah website. Tanpa
adanya web administrator, sebuah website akan Nampak mati atau tidak bergerak sama sekali
(statis). Contohnya situs detik.com, sebuah situs portal berita yang memerlukan pasokan berita
setiap harinya dan tentunya memerlukan seorang atau lebih web administrator untuk mengurus
semuanya, agar berita yang disajikan selalu up to date setiap harinya. Web Administrator juga
berperan penting dalam pengelolaan web server, domain, database dan masih banyak lagi. Hal-hal
yang harus dikuasai untuk menjadi seorang web master adalah: memahami konsep dan cara kerja
web server, mampu melakukan konfigurasi web server, menguasai salah satu database (basis
data) seperti MySQL, mengetahui apa itu Domain, menguasai salah satu sistem operasi berbasis
jaringan seperti Linux, dan mengetahui setidaknya tentang keamanan jaringan internet.
Web Security
Web Security adalah orang yang bertanggung jawab terhadap keamanan website. Biasanya web
secutiy melakukan beberapa kegiatan seperti: pentest (penetration testing), mencari bug/hole
pada website, melakukan Patching atau membangun pertahanan website, serta selalu update
mencari informasi tentang Bug pada web server yang digunakan. Web Security juga bisa
berprofesi sebagai Hacker, karena pada dasarnya hacker dan web security adalah orang yang
bertanggung jawab atas keamanan jaringan internet.
33
Namun ruang lingkup Hacker sangat luas, dan web security merupakan salah satu bagian dari
Hacker. Tanpa Hacker, jaringan komputer bahkan internet tidak akan tercipta, tanpa hacker juga
kemanan jaringan tidak akan pernah kokoh dan terus dapat dibobol oleh cracker.
Web Developer
Beberapa orang mungkin memiliki pendapat yang berbeda tentang pengertian Web Developer,
Menurut pendapat saya: Web Developer adalah orang yang bertugas mengembangkan website.
Baik itu desain interfaces, aplikasi web, Content Management System, serta teknologi website.
Menurut pendapat orang lain yang saya temukan digoogle: Web Developer adalah orang yang
menciptakan aplikasi website dengan menggunakan bahasa pemograman. pada dasarnya, web
developer membuat berbagai hal "terjadi" pada sebuah website. Peran web developer, adalah
sebagai penghubung dari semua sumber daya yang akan digunakan pada sebuah website, mulai
dari pemanggilan database, membuat halaman website yang dinamis, hingga mengatur cara
pengunjung untuk berinteraksi dengan elemen-elemen dari website tersebut. Seorang web
developer yang handal akan terbiasa dengan bahasa peograman, baik tu disisi server (server-side
scripting) maupun disisi client (client-side scripting). dan jangan lupa dengan aspek database yang
akan digunakan. Berikut adalah bagian aplikasi yang harus dipahami oleh seorang web developer:
1.
Client-side : JavaScript
2.
Server-Side : ASP, ASP.Net, Java, Perl, PHP, Python, Ruby, dsb.
3.
Database : MySQL, Oracle,dsb.
Aspek tampilan menjadi sisi yang agak "terpinggirkan" oleh web developer. Pada umumnya
setelah scripting dari aplikasi web selesai dibuat, web developer akan menyerahkan pekerjaannya
kepada web designer untuk menciptakan tampilan yang baik.
Sumber:
http://www.kaltimsourcecode.com/index.php?option=com_content&view=article&id=92:pengerti
an-web-developer&catid=36:website&Itemid=65
34
Web Master
Menurut pendapat saya: Web Master adalah gabungan dari semua profesi diatas, baik itu web
designer, web programmer, web administrator, atau web developer. Jadi, dapat kita simpulkan
bahwa web master adalah level profesi yang paling tinggi. Karena profesi ini sudah mencakup
semuanya, makanya dinamakan Master. Sebagai catatan, webmaster mungkin juga bertanggung
jawab untuk melakukan optimisasi mesin pencari (SEO), mengisi content pada website, hingga
memasarkan website tersebut.
Dalam kelompok kerja yang lebih besar, webmaster akan lebih banyak menjadi manager dari
sebuah web-based project, mengatur pekerjaan web developer dan web designer, hingga
melakukan pengujian terhadap usability dari aplikasi web yang dibuat.
35
BAB III - Web Hosting

Sumber: Wikipedia.org
Apa yang dimaksud dengan Web Hosting?

Web Hosting adalah suatu layanan penyewaan tempat diInternet, yang memungkinkan
perorangan atau organisasi dapat menyimpan data-data websitenya mulai dari file-file, hingga
database pada web server.
Tempat dapat juga diartikan sebagai media penyimpanan data berupa megabytes (mb), hingga
terabytes (tb) yang memiliki koneksi ke internet, sehingga data tersebut dapat direquest atau
diakses oleh user dari semua tempat secara umum. Inilah yang menyebabkan sebuah website
dapat diakses bersamaan dalam satu waktu oleh multi user.
Pengertian dari sumber lain tentang Web Hosting: Web Hosting atau Server Hosting adalah
tempat menampung data-data yang diperlukan oleh sebuah website sehingga dapat diakses lewat
Internet. Secara fisikal, web hosting adalah sebuah hardisk pada sebuah sebuah server dalam
keadaan menyala/online selama 24 jam non stop. Analoginya, sebuah web site dapat diibaratkan
sama dengan Toko dalam sebuah Mall.
Manajemen Mall menyediakan infrastruktur, listrik, telpon, fasilitas dan penyewaan ruang agar
orang-orang dapat membuka toko. Setiap toko pemiliknya berbeda, dekorasinya berlainan dan
beroperasi tanpa mengganggu toko yang lainnya.
Siapa saja yang membutuhkan Web Hosting?

Seperti yang sudah dijelaskan diatas, setiap orang ataupun perusahaan dapat menyewa tempat
atau memanfaatkan jasa web hosting ini, didukung dengan kemajuan teknologi informasi yang ada
saat ini maka pemanfaatan jasa web hosting merupakan sarana alternatif yang handal untuk:
Promosi, Menyebarkan Informasi, Berjualan, Layanan Publik sampai dengan sekedar tempat untuk
menumpahkan isi hati yang kelabu dalam buku harian berbasis web (blog: web blog) akibat
ditinggal kekasih hati.
36
Mengapa Perlu Web Hosting?

Kecepatan menyebarkan informasi tentang Jasa, Produk, Layanan Publik dan lainnya merupakan
salah satu tolak ukur keberhasilan bisnis perorangan atau perusahaan,
Contoh Pertama: di Indonesia sekitar 100 juta pengguna telepon genggam yang tentu saja dapat
tersambung ke internet melalui gprs, tidak ada alasan lagi untuk tidak tersambung ke dunia maya,
bahkan di daerah terpencil sekalipun.
Contoh kedua: Seorang mahasiswa kedokteran, dengan dana yang terbatas, untuk mengantisipasi
membeli buku kuliah kedokteran yang harganya bisa mencapai jutaan rupiah, dapat dengan
mudah memperoleh ilmu pengetahuan dan teknologi melalui situs web, dan ini menjadi tanggung
jawab penyelenggara pendidikan untuk menyediakan jasa/layanan web site guna memajukan
pendidikan. Singkatnya, bila anda telah membuat program yang dapat dibaca oleh internet
browser seperti html, maka sudah waktunya anda menaruh disain itu di internet dengan
mengupload disain anda ke perusahaan yang melayani penjualan hosting.
Kapan anda membutuhkan Situs Web?

Disaat anda ingin memasarkan produk atau jasa melewati batas kabupaten, propinsi, negara,
samudra dan benua, disaat anda ingin orang lain memperoleh informasi yang benar mengenai halhal kemanusiaan, disaat anda ingin menyebarluaskan pengetahuan demi kesejahteraan sesama
manusia, disaat anda ingin melakukan transaksi bisnis yang memudahkan pelangan anda
menjangkaunya dari sebuah vila tempat peristirahatan dengan privasi yang tinggi, disaat itulah
anda membutuhkan layanan web hosting.
Situs web adalah sebuah channel above the line termurah yang ada di pasar saat ini, kemampuan
broadcast 24 jam seminggu, tak terbatas pada aspek demografis, geografis, menjadikannya positif
dalam rasio cost to benefit. Bila anda ingin ditemukan, dikenal, diapresiasi, mengiklankan
diri/produk anda, berarti anda wajib memiliki situs web.
37
Dimana menyewa Web Hosting?

Ratusan bahkan ribuan penyelenggara jasa web hosting, dapat memulainya dengan mencari dari
mesin pencari google atau yahoo, tentang beberapa penyedia jasa layanan web hosting di
indonesia. Jangan ragu untuk bertanya, bandingkan fitur kunci seperti kapasitas ruang dan
kapasitas bandwidth, jangan tergiur oleh promosi penyelenggara jasa web hosting yang
bombastis.
Teknologi apa yang digunakan?

Salah satu teknologi yang digunakan adalah fail over hosting, teknologi ini memungkinkan layanan
anda tetap online 24 jam karena dudukung oleh beberapa server komputer yang secara otomatis
akan menggantikan tugas server komputer yang mengalami kerusakan
Bagaimana cara Mengelola Web Hosting?

Setelah anda memiliki/menggunakan jasa layanan web hosting, selanjutnya bagaimana
mengelolanya, hal ini merupakan tantangan yang tidak murah, sebab informasi yang ada harus
selalu ditambah dan diperbaharui. Sebuah Tips sederhana yaitu, lakukan persiapan pada posisi Off
Line untuk menghemat. Selamat mencoba.
Bagaimana cara membuat server webhosting?

Beberapa software dasar yang harus dimiliki untuk membuat server hosting sendiri
(recommended):
Operating System Server

- Linux, CentOS, FreeBSD, RedHat, Ubuntu (gratis)
- Windows 2003 Server, Windows 2008 Server (bayar)

- BIND 9 (gratis)
38
Web Server
- Apache (gratis) berfungsi sebagai Web Server berbasis Linux
- IIS versi 4.0, atau IIS versi 5.0 (gratis) berfungsi sebagai Web Servr berbasis Windows
PHP (gratis)
berfungsi untuk website yang menggunakan bahasa pemograman PHP
Databases
Berfungsi sebagai pusat penyimpanan data pada server atau Server Data Center.
- MySQL (gratis) berfungsi sebagai Databases pada server berbasis Linux/Unix
- MSSQL (bayar) berfungsi sebagai Database pada Operating System server berbasis Windows
PHPMyAdmin
berfungsi untuk memudahkan add, edit, dan delete table pada MySQL
FTP Server
berfungsi untuk memudahkan transfer data ke website menggunakan FTP.
- ProFTPD (gratis)
- Pure-FTPD (gratis)
- vsFTPD (gratis)
Mail Server
berfungsi untuk mengelola email pada server.
- QMail (gratis)
- Postfix (gratis)
- Squirrelmail (gratis)
- RoundCube (gratis) jika ingin support WebMail
39
Biografi Penulis
PHP dan MySQL, Miniw0rm CMS berlisensi open source, artinya siapa saja boleh memodifikasinya
serta menggunakannya sesuai dengan keinginan masing-masing. Miniw0rm CMS dibuat dengan
model programming for future, artinya semua code yang ditulis dengan teknik pemrograman
yang mereka gunakan. Menguasai bahasa pemrograman, bahasa scripting dan bahasa markup
berbasis web seperti: PHP, CSS, XHTML, Javascript, JQuery, Ajax, XML dan MySQL.
Contact Person

Teknologi, Standarisasi Dan Software
Oleh:
Virgiawan Listanto
Lisensi Dokumen:
Daftar Isi
Biografi Penulis
Lisensi Dokumen
Pendahuluan
BAB I Teknologi Dan Standarisasi

HTML
XHTML
HTML 5
CSS
CSS 3
JavaScript
Ajax
JQuery
JSON
XML
PHP
ASP
JSP
CGI
Database
MySQL
Apache
CMS
BAB II Software Pembuat Website

Software Desain Website
Software Pemrograman Website
Aplikasi Package Server Untuk Website
Pendahuluan
Dalam hal membuat website, kita memerlukan adanya suatu teknologi, standarisasi, dan software
pembangun untuk menghasilkan website yang baik. Pada buku ketiga ini, penulis akan mencoba
menyajikan beberapa materi tentang Teknologi, Standarisasi, Dan Software pembangun website.
Penulis harap setelah kalian membaca buku ini wawasan dan pengetahuan kalian akan bertambah.
Are You Ready? Tere-re-re-re-ret :D :D :D
BAB I Teknologi Dan Standarisasi

Tidak bisa dipungkiri lagi, keberadaan internet kini telah menjadi sebuah trend dan gaya hidup
tersendiri bagi sebagian orang. Teknologi internet yang sudah semakin maju, mampu
menghasilkan beberapa teknologi anak yang diprediksi akan terus berkembang. Ribuan bahkan
jutaan situs yang ada di internet, merupakan sebuah karya nyata yang dibuat menggunakan
beberapa teknologi pembangun website.
HTML
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat
halaman-halaman website. Lebih jelasnya, Bahasa markup adalah sekumpulan aturan-aturan yang
mendefinisikan suatu sintaks, sintaks digunakan untuk menjelaskan dan mendeskripsikan teks
atau data dalam sebuah dokumen melalui penggunaan tag. HTML merupakan bahasa markup
yang menggambarkan kepada browser tentang bagaimana caranya menampilkan format teks,
data, dan grafik ke layar komputer ketika sedang berkunjung ke sebuah website.
Ingat! HTML bukanlah bahasa pemrograman. HTML adalah bahasa Markup yang digunakan untuk
membuat halaman-halaman website, dan menampilkan halaman-halaman tersebut ke browser.
HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung
pada sistem operasi tertentu. HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN
(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa), HTML pertama kali dipopulerkan oleh
web browser Mosaic. Versi terakhir dari HTML adalah HTML 4.01, dan saat ini telah berkembang
menjadi XHTML.
HTML merupakan kode-kode tag yang menginstruksikan web browser untuk menghasilkan
tampilan halaman web sesuai yang diinginkan. Sebuah file yang merupakan file HTML dan
berextensi .html atau .htm dapat dibuka menggunakan web browser seperti Mozilla Firefox atau
Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun PDA dan
program lain yang memiliki kemampuan menjelajah website. Lebih lanjut tentang HTML, nanti
akan kita bahas pada buku selanjutnya.
XHTML
Menurut Wikipedia.org, XHTML (Extensible HyperText Markup Language) adalah bentuk
reformulasi dari HTML yang menggunakan paradigm XML. XHTML merupakan gabungan antara
HTML dan XML (Extensible Markup Language). Tujuan XHTML adalah menggantikan peran HTML.
XHTML adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa yang lebih baik.
XHTML merupakan versi HTML yang memenuhi persyaratan XML dan menjadi standar
internasional dengan spesifikasi yang ditetapkan oleh W3C (World Wide Web Consortium).
Beberapa alasan mengapa menggunakan XHTML:

1. XHTML menyempurnakan kekurangan-kekurangan HTML.
2. XHTML dapat dijalankan diberbagai platform, sehingga memungkinkan situs kita dibuka dengan
baik melalui PDA dan ponsel.
Penulisan tag pada XHTML tidak terlalu berbeda dengan HTML 4.01 standar. XHTML
mengharuskan semua penulisan tag ditulis dengan huruf kecil (lowercase) dan selalu ditutup
menggunakan penutup tag />
Deklarasi Pada XHTML

Deklarasi Doctype pada XHTML hampir sama dengan Doctype pada HTML. W3C mengharuskan
agar selalu menggunakan Doctype pada XHTML. Terdapat 3 Jenis Doctype pada XHTML, yaitu:
XHTML - Strict. Digunakan untuk membuat halaman yang seluruh layout dan formatnya dikontrol
penuh oleh CSS.
!
"
#$ %%% %
&' ()
* !
++,
XHTML - Transitional. Digunakan untuk membuat halaman yang sebagian besar menggunakan
tag-tag HTML.
-.*! !&.-
"
#$ %%% %
&' ()
&' ()
-+! !&.- + + ,
XHTML - Frame. Digunakan jika kita memakai frame pada halaman web.
/ - 0*0
"
#$ %%% %
1 - 0*0 + + ,
Beberapa aturan pada XHTML

Seperti yang telah disinggung sebelumnya, XHTML merupakan penyempurnaan dari HTML. Untuk
itu, ada beberapa aturan agar program dapat berjalan lebih stabil dan konsisten. Aturan tersebut
antara lain:
1. Setiap tag harus ditulis dengan huruf kecil.
2. Selalu Memberi penutup untuk setiap tag.
3. Membuka dan menutup tag pada tempat yang benar.
4. Atribut tag ditulis dengan huruf kecil dan memakai tanda petik.
HTML 5
Menurut Wikipedia.org, HTML5 adalah revisi kelima dari HTML yang hingga pada bulan Juni 2011
masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki
teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan
juga mudah dimengerti oleh mesin.
HTML5 merupakan salah satu karya World Wide Web Consortium (W3C) untuk mendefinisikan
sebuah bahasa markup tunggal dapat ditulis dengan cara HTML maupun XHTML. HTML5
merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan
terpisah dan diimplementasikan secara berbeda-beda oleh banyak software pembuat web.
Sejarah HTML 5
Kelompok Kerja Teknologi Aplikasi Website Hyperteks (Web Hypertext Application Technology
Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium
W3C sedang fokus pada pengembangan XHTML 2.0 dimasa depan, sementara HTML 4.01 belum
pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam
pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat
pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan
HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan
konten apapun di web.
Proses Standarisasi W3C

Kelompok kerja untuk teknologi aplikasi website hypertext (WHATWG) mulai menspesifikasikan
HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0, hingga pada bulan maret 2010
spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft
di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.
Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang
mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan
hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam
tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun
sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada beberapa web
browser sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.
Berdasarkan jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir
tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan
dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008,
tetapi hingga pada bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C.
WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat
rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus:
Direkomendasikan adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada
dua atau lebih dengan sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson
memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian,
banyak bagian dari spesifikasinya sudah stabil dan sudah dapat diterapkan pada produk:
Beberapa bab secara relatif telah stabil, maka dari itu implementasinya juga sudah hampir
mendekati penyelesaian, dan fitur tersebut sudah dapat digunakan hari ini (misalnya: tag
<canvas>).
WHAT Working Group, When will HTML5 be finished?
Markup
Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal
penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik
pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh
(<span>) (biasanya sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian
bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan
kegunaan baru melalui interfaces yang telah distandarkan, seperti elemen multimedia <audio>
dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen
presentasi seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan
Cascading Style Sheet (CSS).
CSS (Cascading Style Sheet)

Menurut Wikipedia.org, CSS adalah bahasa Style Sheet yang digunakan untuk mengatur tampilan
sebuah website, sehingga web akan terlihat lebih terstruktur dan seragam. CSS Sama halnya
dengan styles pada aplikasi Microsoft Word, Style pada MS Word dapat mengatur heading,
subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML.
CSS juga dapat mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna
border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri,
kanan, atas, bawah, dan parameter lainnya.
Sejarah CSS
Nama CSS didapat dari fakta, bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk hubungan parent-child pada setiap style. CSS sendiri
merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium
(W3C) pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas
browser terbaru mereka yang telah disesuaikan atau paling tidak hampir mendekati dengan
standar CSS.
Versi CSS
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat
pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap
format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS
yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi
konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk
printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.
10
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga
animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya. Selain
itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow,
border-image, CSS Math, dan CSS Object Model.
Sifat CSS
CSS memiliki dua sifat yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip CSS yang
ditulis harus dimasukkan secara langsung ke halaman web yang akan didesain. Dan Jika kita
membuat lebih dari satu halaman website, maka skrip CSS harus disertakan juga pada halaman
web yang lainnya. Haduuuhh Ribet yach !! :D
Sifat yang kedua adalah eksternal, dimana skrip CSS dapat dipisahkan dan diletakkan pada folder
atau tempat yang lain. Jadi, kita cukup menggunakan semacam tautan/link menuju ke file CSS
yang berada pada tempat lain tersebut. Wiiih, Lebih enak pakai yang ini dong :D
Fakta Menggunakan CSS

Telah didukung oleh banya browser versi terbaru, tetapi tidak didukung oleh browser-browser
versi lama.
Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index
untuk menempatkan objek dalam posisi yang sama.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file
dan kecepatan pengunduhan.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan
sesudahnya.
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai
browser.
CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Lebih lanjut tentang CSS, nanti akan kita bahas pada buku-buku selanjutnya.
11
CSS3
CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web
browser sudah mendukung penggunaan CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada
perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3,
tidak perlu mengubah apapun.
CSS 3 memiliki beberapa fitur baru, seperti:

Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan
Microsoft Silverlight
Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
dapat menggunakan huruf-huruf yang tidak termasuk huruf default web.
Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2
dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.
Yang Baru Di CSS 3

Borders
border-color
border-image
border-radius
box-shadow
Backgrounds
background-origin and background-clip
background-size
multiple backgrounds
Color
HSL colors
HSLA colors
opacity
RGBA colors
12
Text effects
text-shadow
text-overflow
word-wrap
User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left
Selectors
attribute selectors
Basic box model
overflow-x, overflow-y
Generated Content
content
Other modules
media queries
multi-column layout
Web fonts
speech
JavaScript
Menurut Wikipedia.org, JavaScript adalah bahasa skrip yang sangat populer diinternet dan dapat
bekerja disebagian besar web browser seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan
Opera. Kode JavaScript dapat disisipkan didalam dokumen HTML menggunakan tag <script>
</script>.
13
Sejarah JavaScript
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha,
kemudian berganti nama menjadi LiveScript, dan akhirnya menjadi JavaScript. Navigator
sebelumnya telah mendukung Java untuk lebih dapat dimanfaatkan para programmer yang nonJava. Maka dari itu dikembangkan bahasa pemrograman bernama LiveScript untuk
mengakomodasi hal tersebut. Kemudian bahasa pemrograman inilah yang akhirnya berkembang
dan diberi nama JavaScript, walaupun tidak ada hubungannya antara bahasa Java dengan
JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover
baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[\ JavaScript
adalah bahasa yang digunakan untuk AJAX.
AJAX
AJaX (Asynchronous JavaScript and XMLHTTP) merupakan teknologi baru untuk menciptakan
aplikasi web yang interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada
web server, melakukan pertukaran data dengan server dibelakang layar, sehingga halaman web
tidak harus melakukan load ulang secara keseluruhan setiap kali pengguna melakukan refresh atau
perpindahan halaman web.
AJAX bukanlah bahasa pemrograman yang baru. AJAX sendiri berasal dari bahasa scripting client
yaitu JavaScript dengan bantuan XML (eXtensible Markup Language). Dengan adanya AJAX, akses
data ke web server yang dikirimkan oleh client dapat berjalan lebih cepat. Tanpa harus melakukan
refresh halaman, tanpa kedipan layar di browser, dan tanpa menunggu waktu yang lama.
AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. Cara kerja
AJAX merupakan sebuah proses yang berawal dari client. Client merequest sebuah halaman PHP
ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script
PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirimkan kembali
ke client untuk diolah oleh Javascript.
14
Hasil olahan javascript tersebut akhirnya ditampilkan di client sebagai bentuk output tanpa harus
merefresh halaman web, sedangkan pada mekanisme biasa respon yang dihasilkan oleh server
berupa HTML mengakibatkan halaman web akan merefresh tampilan. Perbedaan pada proses
inilah yang menjadikan AJAX banyak digunakan oleh pemgembang proyek web sebagai solusi.
AJAX sendiri diperkenalkan oleh seorang pakar pembuat program khususnya pemrograman
berbasis web Rasmus Lerdorf. Rasmus Lerdorft mengemukakan konsep AJAX dalam sebuah
mailing list (milist). Berawal dari milist tersebut konsep AJAX dikenal dan dikembangkan oleh
banyak orang.
AJAX bisa menjadi solusi yang hebat bagi banyak pengembang-pengembang proyek web. Sebab
AJAX dapat menambah kekuatan aplikasi situs web dan bisa mendapatkan perubahan-perubahan
yang besar dari yang sebelumnya dikembangkan tanpa teknologi AJAX. Serta dengan penambahan
metode ini juga membuat harga dari sebuah aplikasi situs web menjadi bertambah. Bisa dibilang
AJAX tidak memerlukan modal yang besar tetapi bisa menghasilkan produk yang cukup besar.
Sumber:
http://id.shvoong.com/internet-and-technologies/2098389-sekilas-tentang-bahasaajax/#ixzz1UNF8DqDO
JQuery
JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita untuk membuat
website berjalan lebih interaktif dengan mudah. jQuery sudah mengautomatiskan pekerjaanpekerjaan yang umum dan mempersimple code yang kompleks. Library ini sangat kecil dan
mempunyai banyak pluggin yang dapat mempermudah kita untuk membuat aplikasi website yang
interaktif dan menarik.
Fitur-fitur yang ditawarkan oleh jQuery, antara lain:

jQuery menawarkan sebuah selector yang efesien untuk mengambil bagian tertentu pada
dokumen yang selanjutnya dapat dimanipulasi.
15
Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS

dengan mudah.
Merespon interaksi user dengan web. jQuery mempunyai cara yang sangat-sangat elegan
untuk memasukkan sebuah event ke dalam salah satu bagian dari web.
Menambah animasi. Kita dapat memberi animasi pada web dengan jQuery
Mempermudah AJAX.
Sumber: http://www.koder.web.id/tutorial-php/belajar-jquery-mudah/
JSON
Menurut Wikipedia.org, JSON (dilafalkan "Jason"), merupakan singkatan dari JavaScript Object
Notation. JSON adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks
dan terbaca oleh manusia, serta digunakan untuk merepresentasikan struktur data sederhana.
Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi
jaringan pada suatu proses yang disebut serialisasi.
Aplikasi utamanya adalah aplikasi web berbasis AJAX, JSON berperan sebagai alternatif terhadap
penggunaan tradisional format XML. Walaupun JSON didasarkan pada sub-set bahasa
pemrograman JavaScript dan umumnya menggunakan bahasa JavaScript tersebut, JSON dianggap
sebagai format data yang tidak tergantung pada suatu bahasa. Kode pengolahan dan pembuatan
data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs resmi JSON beralamatkan
di www.json.org
Format JSON dispesifikasikan pada RFC 4627 oleh Douglas Crockford. Tipe media Internet resmi
JSON adalah application/json sedangkan ekstensi filenya adalah .json. Pada Desember 2005,
Yahoo! mulai menawarkan opsi format JSON untuk layanan webnya. Google mulai menyediakan
umpan JSON untuk protokol web GData-nya pada Desember 2006.
16
XML
XML (Extensible Markup Language) adalah bahasa markup yang digunakan untuk menyimpan data
(tidak ada program) dan tidak tergantung dengan tools tertentu (seperti editor, dbms, compiler,
dsb). Jika demikian, Lalu digunakan untuk apa dokumen XML ini?
Perbedaan antara XML dan HTML

Perlu di ingat bahwa:
XML bukan merupakan pengganti HTML.
XML dan HTML yang dirancang dengan tujuan yang berbeda:
XML dirancang untuk transportasi dan menyimpan data.
HTML dirancang untuk menampilkan data, dengan fokus pada bagaimana data terlihat.
Keuntungan XML
Ekstensibilitas : dapat ditukar/digabung dengan dokumen XML lain.
Memisahkan data dan presentasi. Yang akan direpresentasikan dalam XML dan XSLT.
Pencarian data cepat karena XML merupakan data dalam format yang terstruktur.
Plain Text dan platform independent.
Untuk pertukaran data.
Dokumen XML dapat digunakan untuk berbagai macam tujuan, seperti:

Sebagai penyimpan data (database) yang mudah dibaca oleh user karena disimpan dalam
bentuk teks.
Sebagai Standard transfer data, XML dapat digunakan untuk pengiriman data transaksi
antar perusahaan, atau mentransfer data dari DBMS yang berbeda (misalnya: dari Oracle
ke SQL Server).
Sebagai acuan untuk membuat bahasa baru, seperti WML (Wireless Markup Language)
yang digunakan pada mobile device dengan protokol WAP, atau VoiceXML yang digunakan
sebagai bahasa markup untuk pengenalan suara, dialog, aplikasi interaksi respon suara
maupun DTMF (seperti aplikasi pengisian pulsa atau call center), dan sebagainya.
17
Sebagai file konfigurasi, di Java dokumen-dokumen XML sering kita jumpai berbentuk
seperti file server.xml dan web.xml yang digunakan Tomcat, atau perintah-perintah dengan
query yang disimpan kedalam file XML yang dipakai pada framework iBatis atau Hibernate.
Sejauh mana perkembangannya?

XML menjadi dasar dari beberapa bahasa markup yang sedang berkembang saat ini, seperti:
XHTML (perbaikan dari HTML), VoiceXML (bahasa untuk aplikasi suara, telepon), XForms (form
pada web yang dapat digunakan pada berbagai macam jenis browser, seperti: desktop, PDA ,
handphone, kertas), XPath, XPointer, XSL dan XSLT (transformasi dan presentasi XML).
Sumber: http://agenilmu.blogspot.com/2009/04/pengertian-singkat-xml.html
PHP
PHP (Hypertext Preprocessor) adalah bahasa pemgrograman web yang dapat ditanamkan atau
disisipkan ke dalam HTML. PHP banyak dipakai untuk membuat aplikasi web dinamis. PHP juga
dapat digunakan untuk membangun sebuah CMS (Content Management System).
Sejarah PHP
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP
pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama
Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah
data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak
pemrogram yang tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan
dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan
kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend
menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat.
18
Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan
meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang
PHP: Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru
dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai
pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun
aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami
perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam
PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.
Kelebihan PHP Dari Bahasa Pemrograman Lain

Beberapa kelebihan PHP dari bahasa pemrograman web lain, antara lain:
1. PHP adalah sebuah bahasa pemrograman yang tidak melakukan sebuah kompilasi.
2. Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai apache, IIS,
Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.
3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap
membantu dalam proses pengembangannya.
4. Dalam sisi pemahamanan, PHP adalah bahasa pemrograman yang paling mudah karena
memiliki referensi yang banyak.
5. PHP adalah bahasa open source yang dapat digunakan diberbagai sistem operasi sepert: Linux,
Unix, Macintosh, Windows, dan dapat dijalankan secara runtime melalui console, serta dapat
menjalankan perintah-perintah system.
Lebih lanjut tentang PHP, nanti akan kita bahas pada buku-buku selanjutnya.
19
ASP
Active Server Pages (ASP) adalah salah satu bahasa pemrograman web yang digunakan untuk
menciptakan halaman web yang dinamis. ASP merupakan salah satu produk teknologi dari
Microsoft. ASP diproses melalui web server dan hasil proses ini menghasilkan HTML yang akan
dikirimkan melalui web browser. ASP bekerja pada web server dan merupakan server side
scripting.
ASP diciptakan oleh Microsoft untuk menjawab tantangan pemrograman web dinamis, di mana isi
dari sebuah website dapat diprogram untuk mendapatkan hasil yang berbeda. Tidak seperti HTML
yang hanya menampilkan isi yang statis, ASP mampu menampilkan isi halaman berbeda yang
sesuai dengan tujuan pemrogramannya. ASP telah mencapai versi 3.0 yang berjalan pada platform
Windows 2000 Professional Server. Versi sebelumnya, yaitu versi 2.0, dapat berjalan pada
platform lain seperti Linux, Solaris, OS/2, dan Novell.
Bahasa ASP murni Object Oriented Programming (OOP) dan memiliki struktur bahasa yang sama
dengan bahasa Visual Basic yang mudah dimengerti, karena sintaksnya menggunakan Bahasa
Inggris.
Kelebihan ASP
Ada beberapa keuntungan yang diberikan oleh ASP yaitu:
Mudah dalam mempelajarinya.
Mudah dikembangkan dari sistem yang telah dimiliki.
Tidak perlu kompilasi.
Mudah menggabungkan dengan teknologi lain seperti CGI, DCOM, ActiveX dan lain-lain.
Dengan ActiveX Data Object dan SQL pembuatan Web Data Base menjadi lebih mudah.
Memberikan fasilitas keamanan seperti session Object, cookie, dan fasilitas transaksi
online yang aman dengan protokol SSL, semua dapat dilakukan dengan sedikit kode
tambahan.
Kode ASP tidak dapat di lihat pada sisi client, hal ini di sebabkan oleh karena jika server
menerima request file asp, maka file tersebut diproses dahulu pada server dan yang di
kirimkan adalah kode-kode HTML.
20
JSP
JSP (Java Server Page) adalah teknologi untuk mengontrol isi atau tampilan halaman Web melalui
penggunaan servlet, program kecil yang dijalankan di server Web. Sun Microsystem, pembuat
Java, mengacu kepada teknologi JSP sebagai Servlet API (Application Program Interface). Halaman
HTML yang berisi link ke servlet Java memiliki akhiran .jsp.
CGI
Common Gateway Interface atau disingkat CGI adalah suatu standar untuk menghubungkan
berbagai program aplikasi ke halaman web. CGI mirip sebuah program komputer yang menjadi
perantara antara standar HTML yang menjadikan tampilan web dengan program lain, seperti basis
data (database). Hasil yang diperoleh dari proses pencarian akan dikirimkan kembali ke halaman
web untuk ditampilkan dalam format HTML.
Pada awalnya CGI adalah salah satu yang mendekati aplikasi server-side programming. Program
CGI yang sering digunakan adalah C++ dan Perl. CGI merupakan bagian dari web server yang dapat
berkomunikasi dengan program lain yang ada di server. Dengan CGI web server dapat memanggil
program yang dibuat dari berbagai bahasa pemrograman (Common). Interaksi antara pengguna
dengan berbagai aplikasi, misalnya database, dapat dijembatani oleh CGI.
Sejarah CGI
CGI (Common Gateway Interface) merupakan skrip tertua dalam bidang pemrograman web. Skrip
bisa didefinisikan sebagai rangkaian dari beberapa instruksi program. Untuk membuat skrip yang
dapat dijalankan pada web diperlukan pengetahuan pemrograman. CGI sendiri telah muncul sejak
teknologi web diperkenalkan di dunia pada awal tahun 1990, bersama dengan kemunculan CERN,
dan web server pertama di dunia. CGI disediakan sebagai tool, atau perlengkapan untuk membuat
program web. CGI digunakan untuk membuat program-program tampilan web yang lebih
interaktif, koneksi ke basis data, bahkan membuat permainan (game).
21
Keamanan Program CGI

CGI seringkali digunakan sebagai mekanisme untuk mendapatkan informasi dari user melalui fill
out form, mengakses basis data (database), atau menghasilkan halaman yang dinamis. meskipun
secara prinsip mekanisme CGI tidak memiliki lubang keamanan, program atau skrip yang dibuat
sebagai CGI dapat memiliki lubang keamanan ataupun tidak sengaja). Potensi celah keamanan
yang digunakan dapat terjadi pada CGI antara lain:
Seorang pemakai yang nakal dapat memasang skrip CGI sehingga dapat mengirimkan file
kata kunci (password) kepada pengunjung yang mengeksekusi CGI tersebut.
Program CGI dipanggil berkali-kali sehingga server menjadi terbebani karena harus
menjalankan beberapa program CGI yang menghabiskan memori dari web server.
Database
Database atau Basis Data adalah kumpulan informasi yang disimpan didalam komputer secara
sistematik, sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh
informasi dari basis data tersebut. Perangkat lunak yang digunakan untuk mengelola dan
memanggil (query) basis data disebut sistem manajemen basis data (database management
system, DBMS).
Istilah "basis data" berawal dari ilmu komputer. Meskipun kemudian artinya semakin luas. Catatan
yang mirip dengan basis data sebenarnya sudah ada sebelum revolusi industri yaitu dalam bentuk
buku besar dan kumpulan data yang berhubungan dengan bisnis.
Konsep dasar dari basis data adalah kumpulan dari catatan-catatan, atau potongan dari
pengetahuan. Sebuah basis data memiliki penjelasan terstruktur dari jenis fakta yang tersimpan di
dalamnya: penjelasan ini disebut skema.
Skema menggambarkan obyek yang diwakili suatu basis data, dan hubungan di antara obyek
tersebut. Ada banyak cara untuk mengorganisasi skema, atau memodelkan struktur basis data: ini
dikenal sebagai model basis data atau model data.
22
Model yang umum digunakan sekarang adalah model relasional, yang menurut istilah mewakili
semua informasi dalam bentuk tabel-tabel yang saling berhubungan dimana setiap tabel terdiri
dari baris dan kolom (definisi yang sebenarnya menggunakan terminologi matematika). Dalam
model ini, hubungan antar tabel diwakili dengan menggunakan nilai yang sama antar tabel. Model
yang lain seperti model hierarkis dan model jaringan menggunakan cara yang lebih eksplisit untuk
mewakili hubungan antar tabel.
Istilah basis data mengacu pada koleksi dari data-data yang saling berhubungan, dan perangkat
lunaknya seharusnya mengacu sebagai sistem manajemen basis data (database management
system/DBMS). Jika konteksnya sudah jelas, banyak administrator dan programer menggunakan
istilah basis data untuk kedua arti tersebut.
Perangkat lunak basis data

Perangkat lunak basis data yang banyak digunakan dalam pemrograman dan merupakan
perangkat basis data high level antara lain:
Microsoft SQL Server

Oracle
Sybase
Interbase
XBase
Firebird
MySQL
PostgreSQL
Microsoft Access
dBase III
Paradox
FoxPro
Visual FoxPro
Arago
Force
23
Recital
dbFast
dbXL
Quicksilver
Clipper
FlagShip
Harbour
Visual dBase
Lotus Smart Suite Approach
Selain perangkat lunak di atas, terdapat juga perangkat lunak pemrograman basis data low level,
diantaranya:
Btrieve
Tsunami Record Manager
MySQL
MySQL adalah sebuah software sistem manajemen basis data SQL atau DBMS yang multithread,
multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia
sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka
juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok
dengan penggunaan GPL.
Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh
komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing,
MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana
memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang
Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael "Monty"
Widenius.
24
Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara kerja pengoptimasi-nya
dalam melakukan proses perintah-perintah SQL yang dibuat oleh pengguna maupun programprogram aplikasi yang memanfaatkannya. Sebagai peladen basis data, MySQL mendukung operasi
basisdata transaksional maupun operasi basisdata non-transaksional.
Pada modus operasi non-transaksional, MySQL dapat dikatakan unggul dalam hal unjuk kerja
dibandingkan perangkat lunak peladen basisdata kompetitor lainnya. Namun demikian pada
modus non-transaksional tidak ada jaminan atas reliabilitas terhadap data yang tersimpan,
karenanya modus non-transaksional hanya cocok untuk jenis aplikasi yang tidak membutuhkan
reliabilitas data seperti aplikasi blogging berbasis web (wordpress), CMS, dan sejenisnya. Untuk
kebutuhan sistem yang ditujukan untuk bisnis sangat disarankan untuk menggunakan modus
basisdata transaksional, hanya saja sebagai konsekuensinya unjuk kerja MySQL pada modus
transaksional tidak secepat unjuk kerja pada modus non-transaksional.
Apache
Apache adalah sebuah web server yang dapat dijalankan diberbagai sistem operasi seperti (Unix,
BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk
melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web ini
menggunakan protokol HTTP.
Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang dapat dikonfigurasi, autentikasi
basis data dan lain-lain. Apache juga didukung oleh sejumlah interfaces pengguna berbasis grafik
(GUI) yang memungkinkan penanganan server menjadi mudah. Apache merupakan perangkat
lunak sumber terbuka dan dikembangkan oleh komunitas terbuka yang terdiri dari pengembangpengembang dibawah naungan Apache Software Foundation.
Sejarah apache
Pada awal mulanya, Apache merupakan perangkat lunak sumber terbuka yang menjadi alternatif
dari server web Netscape (sekarang dikenal sebagai Sun Java System Web Server). Sejak April 1996
Apache menjadi server web terpopuler di Internet.
25
Pada Mei 1999, Apache digunakan di 57% dari semua web server di dunia. Pada November 2005
persentase ini naik menjadi 71%. (sumber: Netcraft Web Server Survey, November 2005). Asal
mula nama Apache berasal ketika sebuah server web populer yang dikembangkan pada awal 1995
yang bernama NCSA HTTPd 1.3 memiliki sejumlah perubahan besar terhadap kode sumbernya
(patch). Saking banyaknya patch pada perangkat lunak tersebut sehingga disebut sebuah server
yang memiliki banyak patch ("a patchy" server).
Tetapi pada halaman FAQ situs web resminya, disebutkan bahwa "Apache" dipilih untuk
menghormati suku asli Indian Amerika Apache (Ind), yang dikenal karena keahlian dan strategi
perangnya. Versi 2 dari Apache ditulis dari awal tanpa mengandung kode sumber dari NCSA.
silahkan sunting halaman ini agar lebih komplit.
CMS
CMS (Content Management System) adalah sebuah perangkat lunak yang memungkinkan
seseorang untuk menambah atau mengubah isi dari suatu website. Umumnya, sebuah CMS
(Content Management System) terdiri dari dua elemen:
Aplikasi manajemen isi (Content Management Application, [CMA])

Aplikasi pengiriman isi (content delivery application [CDA]).
Elemen CMA memperbolehkan si manajer isi yang mungkin tidak memiliki pengetahuan mengenai
HTML (HyperText Markup Language), untuk memenej pembuatan, modifikasi, dan penghapusan
isi dari suatu situs Web tanpa perlu memiliki keahlian sebagai seorang Webmaster.
Elemen CDA menggunakan dan menghimpun informasi-informasi yang sebelumnya telah

ditambah, dikurangi atau diubah oleh si empunya situs web untuk meng-update atau
memperbaharui situs Web tersebut. Kemampuan atau fitur dari sebuah sistem CMS berbedabeda, walaupun begitu, kebanyakan dari software ini memiliki fitur publikasi berbasis Web,
manajemen format, kontrol revisi, pembuatan index, pencarian, dan pengarsipan.
26
Contoh CMS:
Drupal
Joomla
Wordpress
Plone
VBulletin
Moodle
Cmsid
Miniw0rm CMS
BAB II Software Pembuat Website

Alhamdulilah sudah sampai pada bab yang ke dua, pada bab ini kita akan membahas tentang
software pembuat website. Apa saja software tersebut? ikuti terus kelanjutannya :D
Software Desain Website

Software yang biasanya digunakan untuk mendesain website antara lain:
Adobe Photoshop
Adobe Photoshop, atau biasa disebut Photoshop, adalah software pengolah citra buatan Adobe
Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak
ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai
pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama
Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems.
Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan
disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3, versi kesebelas adalah
Adobe Photoshop CS4 dan versi yang terakhir (keduabelas) adalah Adobe Photoshop CS5.
Photoshop tersedia untuk Microsoft Windows, Mac OS X, dan Mac OS; versi 9 ke atas juga dapat
digunakan oleh sistem operasi lain seperti Linux dengan bantuan perangkat lunak tertentu seperti
CrossOver. Adobe Photoshop juga bisa digunakan untuk membuat desain halaman website.
27
Corel Draw
CorelDraw adalah software pengolah citra berbasis vektor yang dibuat oleh Corel, sebuah
perusahaan perangkat lunak yang bermarkas di Ottawa, Kanada. Versi terakhirnya versi 15 yang
dinamai X5 dirilis pada tanggal 23 Februari 2008. Corel Draw pada awalnya dikembangkan untuk
dijalankan pada sistem operasi Windows 2000 dan yang lebih baru. Versi Corel Draw untuk Linux
dan Mac OS pernah dikembangkan, tetapi dihentikan karena tingkat penjualannya rendah.
Versi CorelDRAW X5 memiliki tampilan baru serta beberapa aplikasi baru yang tidak ada pada
CorelDRAW versi sebelumnya. Beberapa aplikasi terbaru yang ada, di antaranya Quick Start, Table,
Smart Drawing Tool, Save as Template, dan lain sebagainya. Corel Draw juga bisa digunakan untuk
membuat desain atau rancangan halaman website.
Software Pemrograman Website

Software yang biasanya digunakan untuk melakukan coding/scripting/pemrograman website
antara lain:
Adobe Dreamweaver
Adobe Dreamweaver merupakan program editing halaman website keluaran Adobe Systems yang
dulunya dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak
digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan
penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh
Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 10
yang ada dalam Adobe Creative Suite 4 (sering disingkat Adobe CS4).
Aplikasi Server Package Untuk Website

Untuk menjalankan sebuah website yang program aplikasinya berjalan disisi server, maka
dibutuhkan sebuah perangkat lunak agar website kita dapat berjalan di komputer lokal (localhost).
Dan untuk website berbasis Content Management System yang tentunya memiliki Database/basis
data, dibutuhkan juga sebuah software database server agar website tersebut berjalan dengan
baik dikomputer lokal.
28
Untuk mengatasi hal ini, biasanya penulis menggunakan Aplikasi Package Server untuk website
agar website karya penulis dapat berjalan dikomputer lokal. Aplikasi tersebut merupakan sebuah
software yang membundel antara software yang digunakan untuk web server, software yang
digunakan untuk program aplikasi berbasis web, serta software yang digunakan untuk menyimpan
basis data (database). Jadi dengan adanya software ini kita tidak perlu repot-repot lagi untuk
menginstallnya satu persatu. Software-software yang penulis maksud antara lain:
Appserv
Appserv merupakan aplikasi yang berfungsi untuk menginstall beberapa macam program aplikasi
website yaitu Apache, PHP, dan MySQL dalam beberapa menit.
Beberapa Fitur dari Appserv adalah:

Apache
PHP
MySQL
phpMyAdmin
Appserv bisa didownload disitus resminya yang beralamatkan di: http:// appservnetwork.com
XAMP
XAMPP adalah perangkat lunak bebas yang mendukung banyak sistem operasi, dan merupakan
kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost),
yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang
ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X
(empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU
General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat
melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload
langsung dari situs resminya di: www.apachefriends.org/en/xampp.html
29

Modul HTML 3

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 HTML 3

Diunggah oleh

Hak Cipta:

Format Tersedia

Biografi Penulis

Virgiawan Listanto, Lahir di Metro, 30 Maret 1993. Menamati

Miniw0rm University | Create Your Title Web Master Here

Lesson: 1 Web Design

Miniw0rm University | Create Your Title Web Master Here

Miniw0rm University | Create Your Title Web Master Here

BAB I Pengenalan HTML

Miniw0rm University | Create Your Title Web Master Here

Web Browser, Code Editor, Dan WYSIWYG

Miniw0rm University | Create Your Title Web Master Here

Contoh WYSIWYG Pada Miniw0rm CMS

Perbedaan Ekstensi .htm dan .html ?

Miniw0rm University | Create Your Title Web Master Here

BAB II Dasar-Dasar HTML

Menjalankan Code Editor Notepad

Miniw0rm University | Create Your Title Web Master Here

Tampilan Awal Notepad

Miniw0rm University | Create Your Title Web Master Here

Struktur Dokumen HTML

Contohnya sebagai berikut:

Miniw0rm University | Create Your Title Web Master Here

Miniw0rm University | Create Your Title Web Master Here

Maka akan tampil sebagai berikut:

Bagaimana? Bisa dijalankan to? Hehe.. :D

Miniw0rm University | Create Your Title Web Master Here

<p> = adalah element yang digunakan untuk membuat paragraph.

Elemen HTML mempunyai ciri-ciri sebagai berikut:

Element yang tidak memiliki isi dan tag penutup contohnya:

<hr /> adalah element yang akan membuat garis lurus.

Miniw0rm University | Create Your Title Web Master Here

Contoh penulisan tag yang benar:

Contohnya sebagai berikut:

<body = adalah element html (nama tag)

Miniw0rm University | Create Your Title Web Master Here

<font = element html

<div = adalah element html

Miniw0rm University | Create Your Title Web Master Here

BAB III HTML Fundamental

Miniw0rm University | Create Your Title Web Master Here

Hasil penggunaan tag <p> dan </p>

Miniw0rm University | Create Your Title Web Master Here

Miniw0rm University | Create Your Title Web Master Here

HTML Rules (Garis Lurus)

Miniw0rm University | Create Your Title Web Master Here

HTML Format Teks

Digunakan untuk membuat huruf menjadi tebal (bold)

Digunakan untuk membuat huruf menjadi garis bawah (underline)

Digunakan untuk membuat huruf menjadi miring (italic)

Digunakan untuk membuat huruf menjadi garis tengah

Digunakan untuk membuat huruf yang sangat kecil

Digunakan untuk membuat huruf yang lebih besar dari normal

Digunakan untuk membuat huruf Superscript superscript

Digunakan untuk membuat huruf Subscript subscript

Digunakan untuk membuat huruf ke tengah (center)

Digunakan untuk membuat huruf miring (sama seperti <i>)

Digunakan untuk membuat huruf garis tengah (sama seperti <strike>)

Digunakan untuk membuat huruf tebal (sama seperti <b>)

Digunakan untuk membuat huruf garis bawah (sama seperti <u>)

Miniw0rm University | Create Your Title Web Master Here

Miniw0rm University | Create Your Title Web Master Here

Digunakan untuk menentukan ukuran huruf.

Digunakan untuk menentukan jenis huruf. Contoh:

Digunakan untuk menentukan warna huruf.

Miniw0rm University | Create Your Title Web Master Here