Modul Praktikum Barumac Nov Edited

Buku
Petunjuk Praktikum
Desain Web
VB031110

Oleh
Dwi Susanto S.ST MT
NIP. 198308032014041001

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

Kata Pengantar

Assalammualaikum, Wr.Wb.
Web merupakan salah satu media dalam digital media publishing. Saat ini publikasi melalui web
sudah menjadi sebuah keharusan baik untuk lembaga maupun perseorangan. Pengguna web sendiri
di Indonesia kian meningkat seiring meningkatnya pengguna mobile di Indonesia. Web tidak hanya
diakses melalui browser yang ada di dekstop, akan tetapi juga melalui perangkat mobile dengan
berbagai jenis ukuran layar.
Pada kesempatan ini penulis ingin mengucapkan banyak terima kasih kepada pihak-pihak
yang turut membantu terbitnya buku petunjuk Praktikum Desain Web ini. Semoga buku petunjuk
praktikum ini dapat lebih meningkatkan pemahaman mahasiswa Multimedia Broadcasting tentang
desain web dan tentang publikasi melalui media digital yang mampu diakses dari berbagai
perangkat.
Wassalammualaikum, Wr.Wb.
Surabaya, 10 Desember 2012
Penulis
Modul Praktikum Desain Web – PENS – Dwi Susanto 3

Daftar Isi
Kata Pengantar ................................................................................................................................. 2

Daftar Isi ............................................................................................................................................. 4
PENDAHULUAN ................................................................................................................................. 9
Pengenalan Web ............................................................................................................................ 11
Bagaimana Website Diakses .................................................................................................................. 11
Bagaimana Website Dibuat ................................................................................................................... 11
Bagaimana Cara Kerja Website .............................................................................................................. 13
Praktikum 1 .................................................................................................................................... 15
Dasar HTML .................................................................................................................................... 15
Tujuan .................................................................................................................................................... 15
Dasar Teori ............................................................................................................................................. 15
Struktur Dokumen HTML ................................................................................................................... 16
Tag ..................................................................................................................................................... 17
Cara Membuat Halaman Web .......................................................................................................... 19
Pengaturan File ................................................................................................................................. 20
Langkah Kerja ........................................................................................................................................ 20
Percobaan .............................................................................................................................................. 21
Tugas ..................................................................................................................................................... 26
Praktikum 2 .................................................................................................................................... 28
Image dan Link .............................................................................................................................. 28
Tujuan .................................................................................................................................................... 28
Dasar Teori ............................................................................................................................................. 28
Images ............................................................................................................................................... 28
Links .................................................................................................................................................. 29
Langkah Kerja ........................................................................................................................................ 32
Percobaan .............................................................................................................................................. 33
PRAKTIKUM 3 ................................................................................................................................ 39
List Dan Tabel ................................................................................................................................ 39
Tujuan: ................................................................................................................................................... 39
Dasar Teori ............................................................................................................................................. 39
List ..................................................................................................................................................... 39
Tabel .................................................................................................................................................. 42
Langkah Kerja ........................................................................................................................................ 44
4
Percobaan .............................................................................................................................................. 45
PRAKTIKUM 4 ................................................................................................................................ 55
FORM ................................................................................................................................................. 55
Tujuan: ................................................................................................................................................... 55
Dasar Teori ............................................................................................................................................. 55
Langkah Kerja ........................................................................................................................................ 60
Percobaan .............................................................................................................................................. 61
Tugas ..................................................................................................................................................... 67
Praktikum 5 .................................................................................................................................... 68
Flash, Video dan Audio ................................................................................................................ 68
Tujuan .................................................................................................................................................... 68
Dasar Teori ............................................................................................................................................. 68
Flash .................................................................................................................................................. 68
Percobaan .............................................................................................................................................. 73
Tugas ..................................................................................................................................................... 77
PRAKTIKUM 6 ................................................................................................................................ 79
Pengenalan CSS .............................................................................................................................. 79
Tujuan: ................................................................................................................................................... 79
Dasar Teori ............................................................................................................................................. 79
Langkah Kerja ........................................................................................................................................ 91
Percobaan .............................................................................................................................................. 91
PRAKTIKUM 7 .............................................................................................................................. 100
Teks dan Background ................................................................................................................ 100
Tujuan .................................................................................................................................................. 100
Dasar Teori ........................................................................................................................................... 100
Teks ................................................................................................................................................. 100
Background ..................................................................................................................................... 103
Langkah Kerja ...................................................................................................................................... 105
Percobaan ............................................................................................................................................ 106
Tugas ................................................................................................................................................... 113
PRAKTIKUM 8 .............................................................................................................................. 115
Boxes ............................................................................................................................................... 115
Tujuan: ................................................................................................................................................. 115
Dasar Teori ........................................................................................................................................... 115
Langkah Kerja ...................................................................................................................................... 118
Percobaan ............................................................................................................................................ 119
Tugas ................................................................................................................................................... 128

PRAKTIKUM 9 .............................................................................................................................. 131
LIST, TABLE DAN FORM ............................................................................................................. 131
Tujuan .................................................................................................................................................. 131
Dasar Teori ........................................................................................................................................... 131
List ................................................................................................................................................... 131
Tabel ................................................................................................................................................ 132
Form ................................................................................................................................................ 133
Alat dan Bahan .................................................................................................................................... 135
Cara Kerja ............................................................................................................................................ 135
Percobaan ............................................................................................................................................ 136
Tugas ................................................................................................................................................... 143
PRAKTIKUM 10 ............................................................................................................................ 145
LAYOUT ........................................................................................................................................... 145
Tujuan .................................................................................................................................................. 145
Dasar Teori ........................................................................................................................................... 145
Alat dan Bahan .................................................................................................................................... 151
Cara Kerja ............................................................................................................................................ 151
Percobaan ............................................................................................................................................ 151
Tugas ................................................................................................................................................... 163
PRAKTIKUM 11 ............................................................................................................................ 165
Desain Layout Dengan Grid ..................................................................................................... 165
Alat dan Bahan .................................................................................................................................... 172
Cara Kerja ............................................................................................................................................ 173
Percobaan ............................................................................................................................................ 174
Tugas ................................................................................................................................................... 180
PRAKTIKUM 12 ............................................................................................................................ 181
Responsive Design ...................................................................................................................... 181
Tujuan .................................................................................................................................................. 181
Dasar Teori ........................................................................................................................................... 181
Cara Kerja ............................................................................................................................................ 187
Percobaan ............................................................................................................................................ 188
PRAKTIKUM 13 ............................................................................................................................ 200
Animasi Dengan CSS3 ................................................................................................................ 200
Tujuan .................................................................................................................................................. 200
Dasar Teori ........................................................................................................................................... 200
Transisi CSS ...................................................................................................................................... 200
Mengaplikasikan Multiple Transisi .................................................................................................. 201
6
Transformasi CSS ............................................................................................................................. 201
Menggunakan Keyframe ................................................................................................................. 204
Langkah Kerja ...................................................................................................................................... 207
Percobaan ............................................................................................................................................ 207
Praktikum 14 ............................................................................................................................... 219
Pengenalan JavaScript ............................................................................................................... 219
Tujuan .................................................................................................................................................. 219
Dasar Teori ........................................................................................................................................... 219
Alat dan Bahan .................................................................................................................................... 221
Langkah Kerja ...................................................................................................................................... 221
Percobaan ............................................................................................................................................ 222
Tugas ................................................................................................................................................... 228
Praktikum 15 ............................................................................................................................... 236
Javascript Library ....................................................................................................................... 236
Tujuan .................................................................................................................................................. 236
Dasar Teori ........................................................................................................................................... 236
Alat dan Bahan .................................................................................................................................... 238
Langkah Kerja ...................................................................................................................................... 238
Percobaan ............................................................................................................................................ 239
Tugas ................................................................................................................................................... 243
Daftar Pustaka ............................................................................................................................. 244

PENDAHULUAN
Buku modul praktikum ini ditulis sebagai sarana pendamping mahasiswa dalam praktikum
mata kuliah web desain. Untuk menggunakan buku ini maka anda harus menyiapkan beberapa
software yang diperlukan, antara lain:
- Seperangkat komputer dilengkapi dengan browser
Browser diperlukan untuk menampilkan halaman web yang dibuat. Sebaiknya diinstall
lebih dari satu browser, misalnya Mozilla Firefox, Google Chrome, atau Opera. Hal ini
ditujukan untuk membuktikan hasil output pada beberapa browser yang berbeda. Kami
merekomendasikan untuk menginstall versi browser terbaru.
- Teks editor
Anda bisa menggunakan teks editor yang ada bersama Sistem Operasi yang anda gunakan.
Untuk pengguna Windows, anda bisa menggunakan notepad atau mendownload
notepad++ yang gratis. Bagi pengguna Mac, anda bisa menggunakan TextEdit yang telah
ada di komputer anda. Anda juga bisa menggunakan software berbayar misalnya seperti
Adobe Dreamweaver.

Struktur Penulisan Buku

Untuk memudahkan dalam praktikum web desain, buku ini ditulis dalam tiga bagian pada tiap
praktikum.
1. Tujuan
Bagian ini berisi tujuan yang ingin dicapai saat mahasiswa telah menyelesaikan modul
pada praktikum tersebut.
2. Dasar Teori
Bagian ini berisi tentang dasar teori secara sekilas dari materi yang akan dikerjakan pada
praktikum. Dasar teori yang lebih lengkap dapat dilihat pada buku pegangan materi untuk
mata kuliah web desain.
3. Contoh Program
Pada bagian contoh program berisi contoh-contoh program yang bisa langsung dicoba
saat praktikum. Mahasiswa diharuskan mengetik ulang contoh program yang disediakan.
4. Tugas
Bagian tugas berisi beberapa pertanyaan yang perlu dikerjakan menggunakan
pemrograman HTML atau CSS atau keduanya. Bagian ini bertujuan untuk mengukur hasil
mahasiswa dari tujuan yang telah diberikan.

10
Pengenalan Web
Bagaimana Website Diakses
Sebelum masuk pada kode-kode pemrograman web, ada baiknya perlu diketahui terlebih
dahulu bagaimana para pengguna web mengakses web melalui media yang berbeda-beda.
Cara pertama adalah menggunakan browser. Para pengguna internet mengakses web melalui
browser dengan cara mengetikkan alamat website pada kota alamat browser. Beberapa jenis
browser yang saat ini populer misalnya Google Chrome, Firefox, Opera, Safari dan Internet
Explorer.
Para pengguna cukup mengetikkan alamat website yang dituju pada kotak alamat yang ada
pada browser. Selanjutnya browser akan melakukan request melalui jaringan internet yang akan
menuju ke web server. Didalam web server inilah file dari website yang anda akses disimpan.
Selanjutnya web server akan mengirimkan kembali halaman yang anda minta melalui jaringan
internet ke komputer atau perangkat yang anda gunakan.
Gambar logo browser yang saat penulisan buku ini paling banyak dipakai, berurutan dari kiri
ke kanan: Safari, Opera, Chrome, Firefox dan Internet Explorer
Seringkali pihak pembuat browser merilis versi terbaru browser mereka dengan
menambahkan fitur-fitur baru dan juga dukungan terhadap penambahan yang ada pada bahasa
pemrograman web. Akan tetapi tidak banyak juga pengguna internet yang selalu rajin melakukan
update terhadap browser yang mereka gunakan. Jadi anda sebaiknya selalu siap apabila website
anda tidak selalu tampil sama pada browser yang berbeda dan anda tidak sepenuhnya bisa
berharap para pengunjung web yang anda buat dapat sepenuhnya menggunakan fitur-fitur yang
ada pada website anda.
Cara kedua adalah dengan menggunakan berbagai peralatan atau perangkat, misalnya
perangkat mobile. Yang perlu di waspadai adalah perangkat-perangkat tersebut memiliki ukuran
layar yang berbeda dan memiliki kecepatan akses yang berbeda pula. Kita akan mempelajari cara
mengantisipasi berbagai ukuran layar ini pada bagian materi Responsive Design.
Bagaimana Website Dibuat

Berbagai jenis website saat ini tidak asing lagi bagi kita mulai dari sosial media, blog ataupun
yang lainnya. Berbagai jenis website tersebut selalu dibuat dengan menggunakan HTML dan CSS.
Akan tetapi untuk kebutuhan tertentu website menambahkan beberapa teknologi lainnya.
Saat sebuah website ditampilkan dalam halaman browser anda, maka sebenarnya anda
menerima kode-kode HTML dan CSS yang selanjutnya diterjemahkan oleh browser ke dalam
bentuk halaman yang anda lihat. Kode-kode tersebut dikirimkan oleh web server yang
menyimpan file-file website yang kita akses.

Seringkali website juga mengirimkan javascript atau Flash yang selanjutnya anda akan melihat
hasilnya pada halaman yang anda akses berupa animasi Flash atau bentuk lainnya. Kita juga akan
mempelajari cara memasukkan berbagai media tersebut kedalam halaman web yang kita buat.
Selain itu sebagian besar website juga menambahkan beberapa file tambahan baik berupa
gambar, video atau bentuk file lainnya. Pada praktikum yang membahas tentang Images, Flash
dan Video, kita akan mempelajari cara menyiapkan dan menambahkan berbagai bentuk file
tersebut kehalaman web.
Contoh tampilan sebuah website yang dilengkapi dengan video
Website dengan skala kecil, biasanya hanya menggunakan teknologi HTML dan CSS
didalamnya.
Website dengan skala besar yang secara teratur isinya selalu baru, misalkan seperti portal
berita, sosial media atau yang menggunakan Content management system(CMS) seringkali
menggunakan teknologi yang lebih kompleks. Teknologi meliputi database dan bahasa
pemrograman berbasis server seperti PHP, ASP atau lainnya. Akan tetapi sebenarnya berbagai
bahasa pemrograman tersebut akan menghasilkan kode HTML dan CSS saat dikirimkan ke
komputer pengguna. Pada mata kuliah ini anda akan berfokus dengan apa yang dilihat oleh
pengunjung sehingga anda hanya akan berfokus pada HTML dan CSS.
HTML 5 dan CSS3 cukup populer saat penulisan buku ini
Saat modul ini ditulis, HTML5 dan CSS3 masih terus dikembangkan dan belum menjadi
standard. Meskipun demikian sudah banyak browser yang mendukung berbagai fitur baru dari
HTML5 dan CSS3. Sehingga pada modul ini juga akan dibahas terkait dengan HTML5 dan CSS3.
Anda tetap perlu mempelajari versi awal HTML dan CSS karena merupakan pemahaman dasar
12
untuk menerapkan berbagai fitur baru di versi terbaru dari keduanya.
Bagaimana Cara Kerja Website

Saat seseorang mengetikkan dan mengirimkan alamat web yang diminta dengan
mengetikkannya di kotak alamat pada browser, maka request tersebut selanjutnya akan
diterjemahkan menjadi nomor ip. Nomor IP ini merupakan kombinasi beberapa nomor yang
menunjukkan alamat dari sebuah komputer yang terhubung pada jaringan. Dalam hal ini nomor
IP yang dimaksud adalah nomor IP dari web server yang menyimpan data-data website yang kita
akses.
Selanjutnya browser akan mengontak Domain Name Service(DNS) server dan DNS akan
memberitahukan lokasi web server. Dari web server ini selanjutnya diperoleh data lengkap dari
website yang anda akses.
Proses ini dapat dijelaskan melalui sebuah gambar sederhana seperti di bawah ini
Gambar tentang cara kerja web.

14
Praktikum 1
Dasar HTML
Tujuan
- Mahasiswa mampu memahami struktur dasar dokumen HTML
- Mahasiswa mampu memahami format penulisan HTML
- Mahasiswa mampu memahami tag-tag dasar HTML
Dasar Teori
HTML, yang merupakan kepanjangan dari Hypertext Markup Language, merupakan bahasa
yang digunakan untuk membuat web. Seperti namanya, HTML berfungsi sebagai markup, yang
apabila mungkin terkesan rumit walaupun sebenarnya kita sering melakukannya tiap hari. Markup
adalah sesuatu yang anda tambahkan ke sebuah dokumen untuk menandai bahwa ia memiliki arti
khusus.
Saat anda membuat sebuah dokumen melalui Microsoft Word misalnya, anda bisa
membedakan mana yang heading dan mana yang bukan dengan hanya melihat pada ukuran dan
ketebalan font yang berbeda. Saat kita ingin membedakan antara paragraph satu dengan yang
lainnya, maka kita menekan tombol Enter. Anda juga dapat menambahkan tabel, list, nomor urut
dan lain-lainnya ke dalam sebuah dokumen. Saat anda melakukan proses markup pada dokumen
web, maka sebenarnya anda melakukan proses yang sama dengan dokumen pada Microsoft Word
tadi.
Apabila anda menekan Enter untuk membedakan antara paragraph satu dengan yang lainnya
pada Microsoft Word, maka pada HTML disediakan mekanisme yang berbeda untuk
menghasilkan aksi yang sama. Mekanisme ini berupa penulisan-penulisan kode atau lebih dikenal
dengan tag HTML. Setiap tag HTML ini memiliki arti dan fungsi yang berbeda-beda sesuai
dengan apa yang anda butuhkan.
Gambar 1.1 Contoh tampilan sebuah artikel pada website alistapart.com

Gambar di atas merupakan salah satu contoh tampilan sebuah artikel pada website. Hasil

yang sama bisa anda lakukan pada Microsoft Word, yakni untuk membedakan antara judul, nama
pengarang, dan isi dari artikel.
Sebagai contoh, mari kita lihat contoh dokumen HTML berikut ini. Tag HTML berwarna
biru sedangkan teks yang akan anda lihat di browser berwarna hitam.
<html>
<body>
<h1>Ini adalah Main Heading misal untuk judul Bab</h1>
<p> Ini merupakan paragraph dan biasa berisi ringkasan awal
dari isi yang ada dihalaman ini</p>
<h2>Ini merupakan sub header</h2>
<p>Biasanya berisi penjelasan tentang isi dari sub header.
Sub header biasanya dibuat untuk memudahkan pembaca dalam
mengikuti tahapan dari isi</p>
<h2>Ini juga sub Header</h2>
<p>Dan disini berisi tentang penjelasannya</p>
</body>
</html>
Kode HTML selalu berada dalam tanda “< >” yang dinamakan elemen HTML. Elemen
HTML biasanya terbuat dari dua tag, yaitu opening tag “<>” dan closing tag “</>”. Elemen
HTML akan memberitahukan ke browser tentang informasi yang ada didalamnya. Penjelasan tiap
tag akan dibahas lebih lanjut pada bab ini.
1.1 Struktur Dokumen HTML

Pada contoh kode HTML sebelumnya, dapat terlihat beberapa elemen yang berbeda. Setiap
elemen selalu memiliki opening tag dan closing tag.
Gambar 1.1 Struktur dokumen HTML
16
Berdasarkan tersebut, dapat dijelaskan setiap elemennya seperti di bawah ini
- tag <html> memberikan tanda bahwa apa saja yang berada diantara opening tag tersebut
hingga closing tag </html> merupakan kode-kode HTML.
- Tag <body> memberikan tanda bahwa apa saja yang berada diantara tag tersebut hingga
closing tag</body> akan ditampilkan pada halaman browser.
- Tag <h1> menandai bahwa apa saja yang berada diantara opening tag tersebut hingga
closing tag </h1> merupakan heading
- Opening tag <p> hingga closing tag </p> menandai area sebuah paragraph
1.1.1 Tag
Setiap element pada HTML selalu terdiri dari opening tag dan closing tag untuk menandai
wilayah elemen tersebut.
a. Opening tag
Contoh opening tag dapat dilihat pada gambar di bawah ini
Gambar 1.2. Detail keterangan tag
Baik opening ataupun closing tag selalu diawali dengan tanda "<" yang biasa kita kenal
sebagai simbol kurang dari dan diakhiri dengan tanda ">" atau dimbol dari lebih dari. Karakter
yang ada diantara dua simbol tersebut berisi tujuan dari tag, misalnya seperti di atas, karakter p
memiliki tujuan membuat sebuah paragrap.
b. Closing Tag
Untuk menandai akhir dari sebuah element, diperlukan sebuah closing tag. Closing tag
hampir sama dengan opening tag, yang membedakan hanyalah adanya tanda garis miring sebelum
karakter. Seperti contoh pada gambar di bawah ini:

Gambar 1.3. Detail closing tag
Closing tag menandai akhir dari sebuah element dan isi yang ada diantara opening dan closing tag.
1.1.2 Attribute
Attribut berfungsi untuk memberi informasi tambahan terkait elemen yang digunakan.
Atribut ditulis dalam opening tag pada sebuah elemen yang terdiri dari nama atribut dan isi dari
atribut yang dipisahkan dengan tanda sama dengan (=).
Gambar 1.4 Atribut

Nama atribut mengindikasikan informasi apa yang anda tambahkan pada sebuah elemen. Isi
atribut berupa informasi atau setting tambahan pada elemen. Keduanya ditulis dengan
menggunakan huruf kecil dan isi dari atribut ditulis dengan diawali dan diakhiri dengan tanda
petik. Pada contoh di atas, informasi yang diberikan melalui atribut adalah bahasa yang digunakan,
yakni dijelaskan pada isi dari atribut berupa bahasa inggris. Setiap atribut memiliki informasi yang
berbeda didalamnya.
1.1.3. Body, Head dan Title
18
<body> <html>
<head>
Tag ini sudah ada pada contoh <title>Belajar web </title>
sebelumnya. Apapun yang
</head>
berada diantara opening tag
dan closing tag dari body ini <body>
akan ditampilkan pada <h1>Ini adalah bagian body</h1>
halaman browser <p> apapun yang ada pada area body akan
ditampilkan disini</p>
<head> </body>
</html>
Sebelum tag <body> akan
kita jumpai elemen head.
Elemen ini berisi informasi
tentang halaman website,
bukan informasi yang
ditampilkan pada browser.
Diantara opening tag <head>
dan closing tag </head> akan
anda temui tag <title>
<title>
Apapun yang tertulis diantara tag <title> dan </title> akan ditampilkan pada pojok kiri
atas jendela browser anda, tepat di atas address bar atau lokasi dimana anda biasa
mengetik alamat sebuah website. Apabila anda menggunakan browser generasi baru
yang mendukung banyak tab, maka tulisan yang ada pada area <title> akan ditampilkan
pada tab-tab tersebut
2. Cara Membuat Halaman Web

Untuk membuat halaman web, yang anda butuhkan adalah sebuah teks editor, baik anda
menggunakan sistem operasi windows, linux, atau anda pengguna mac. Bagi anda pengguna
Windows, anda bisa menggunakan Notepad yang merupakan bawaan dari sistem operasi ini.
Untuk pengguna Mac, anda bisa menggunakan TextEdit yang seharusnya langsung ada pada
folder Applications.
Selain teks editor sederhana, anda bisa menggunakan aplikasi khusus yang dibuat untuk
pembuatan web, misalnya Notepad++ yang bisa anda download dengan gratis dan bisa anda
install pada sistem operasi Windows anda. Bagi anda pengguna Mac, anda bisa menggunakan
TextWrangler yang juga bisa digunakan secara gratis. Selain aplikasi gratis, anda bisa juga membeli
aplikasi yang berbayar seperti Adobe Dreamweaver.
Dari sekian pilihan aplikasi tersebut, secara garis besar cara yang digunakan dalam membuat
halaman web adalah sama, yakni anda cukup menuliskan kode-kode HTML melalui

aplikasi-aplikasi tersebut dan kemudian menyimpannya sebagai file dengan ekstensi .html.
3. Pengaturan File
Sebuah website seringkali terdiri dari banyak media, baik gambar, video, animasi dan juga
kode-kode web itu sendiri, baik berupa file html, css atau javascript, yang bisa jadi jumlahnya
tidaklah sedikit. Untuk memudahkan dalam pengaturan website anda, maka anda membutuhkan
cara untuk mengatur lokasi dari tiap tipe-tipe file tersebut. Disinilah anda perlu mengetahui
tentang manajemen file dalam sebuah website.
Cara paling mudah adalah membuat folder yang terpisah-pisah untuk tiap jenis file yang
berbeda. Misalnya untuk file-file gambar, anda bisa menyimpannya dalam folder images, folder
css untuk menyimpan file bertipe CSS, folder video untuk menyimpan file-file video, dan disusul
folder-folder lain sesuai dengan file-file yang tersimpan didalamnya.
Gambar 1. Contoh struktur folder sebuah website
Langkah Kerja
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua
percobaan yang ada pada praktikum ini
1. Buatlah folder baru bernama “Praktikum1” dan pastikan anda menyimpan semua file
percobaan di praktikum ini pada folder tersebut
2. Buka teks editor pilihan anda
20
3. Ketikkan semua kode yang ada pada tiap percobaan
4. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor
percobaan dengan ekstensi .html
5. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save
as Type” menjadi “All Files”
6. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe
HTML.
Percobaan
Percobaan 1 : Dokumen HTML Sederhana
Percobaan 2 : Heading
Percobaan 3: Paragraph

Percobaan 4: Komentar
Percobaan 5: Memasukkan garis Horizontal
Percobaan 6: Paragraph : lebih lanjut
22
Percobaan 7: Ganti baris
Percobaan 8: Format Teks
Percobaan 9: Menampilkan teks apa adanya

Percobaan 10: Beberapa model output
Percobaan 11: Menuliskan Kontak
24
Percobaan 12: Akronim dan Singkatan
Percobaan 13: Arah Teks
Percobaan 14: Kutipan Panjang dan Pendek

Percobaan 15: Menghapus dan Memasukkan kata
Tugas
Buatlah sebuah halaman website yang berisi data pribadi anda dengan menggunakan
semua tag yang sudah anda pelajari pada percobaan-percobaan di atas. Yang harus ada pada
halaman yang anda buat adalah:
- Judul halaman
- Data pribadi anda mulai dari nama, alamat, email dll
- Tuliskan deskripsi tentang anda atau tentang kesan kuliah di PENS, khususnya mata
kuliah web desain
26
Praktikum 2
Image dan Link
Tujuan
- Mahasiswa memahami tentang format gambar
- Mahasiswa mampu memasukkan dan mengatur gambar pada halaman web
- Mahasiswa mampu menggunakan link pada website
Dasar Teori
Images
Images atau gambar memiliki peran tersendiri dalam sebuah website, misalnya dalam
bentuk logo, ilustrasi, grafik, foto ataupun untuk kebutuhan mempercantik tampilan halaman
sebuah web. Sebuah gambar bisa bermakna ribuan kata, dan pemilihan gambar yang tepat
akan membedakan antara website yang biasa dengan website yang luar biasa.
Apabila anda tidak memiliki gambar berupa foto atau yang anda desain sendiri, anda bisa
juga menggunakan berbagai layanan yang ada di internet. Anda bisa menggunakan berbagai
gambar yang bisa digunakan secara gratis atau membelinya dari penyedia stok gambar.
Sebaiknya anda membuat folder tersendiri untuk menyimpan kumpulan gambar yang anda
gunakan untuk website anda.
Menambahkan Gambar
<img> <img src="images/gambar_web.jpg" alt="Ideas

for a better future"
Untuk menambahkan gambar ke title="logo dan slogan untuk event industrial
halaman web, kita bisa electronnic seminar">
menggunakan elemen <img>.
Elemen ini tidak memerlukan
closing elemen atau elemen
penutup dan harus diiringi
dengan atribut
src
Atribut ini memberi tahukan ke
browser dimana lokasi gambar
yang akan ditambahkan pada
halaman web. Lokasi file gambar
ini bisa tertulis dalam bentuk
alamat url atau path ke lokasi
folder dimana gambar tersebut
28
disimpan alt
atribut ini berisi teks deskripsi gambar yang akan
mendeskripsikan gambar apabila gambar tersebut tidak
dapat ditampilkan.
title
Atribut title ini bisa anda gunakan untuk memberikan tambahan informasi terkait dengan
gambar. Informasi ini akan muncul saat pengguna melakukan hover atau menggerakkan
pointer mouse tepat di atas gambar
Format Gambar
Format gambar yang biasa digunakan pada website adalah jpeg, gif atau png. Apabila ada
kesalahan dalam memilih jenis format gambar, bisa menyebabkan gambar yang muncul tidak
tajam dan lambat saat ditampilkan. Ukuran dari gambar yang anda pakai juga harus
diperhatikan, yakni pastikan bahwa ukuran tinggi dan lebarnya sesuai dengan ukuran yang
akan tampil dihalaman website.
Apabila anda menyimpan gambar dengan tinggi dan lebar yang kecil, sedangkan anda
akan menampilkannya dalam ukuran yang besar, maka tampilan gambar akan pecah. Apabila
anda ingin menampilkan gambar dalam ukuran kecil sedangkan anda menyimpannya dalam
ukuran yang besar, maka gambar butuh waktu lama untuk ditampilkan pada halaman web saat
diakses.
Pemilihan format gambar yang anda gunakan untuk website membutuhkan beberapa
pertimbangan yaitu:
• Apabila gambar yang anda gunakan memiliki banyak warna yang berbeda pada satu
gambar, maka sebaiknya anda menyimpannya dalam format JPEG.
• Simpan dalam format GIF atau PNG untuk gambar yang hanya memiliki beberapa
warna yang berbeda pada satu gambar atau gambar hanya memiliki satu warna pada
area yang luas.
• Saat sebuah gambar memiliki area yang terisi hanya satu warna, maka ia disebut
dengan flat color. Misalnya seperti logo, ilustrasi atau diagram, biasanya
menggunakan flat color. Berbeda dengan sebuah gambar yang dihasilkan dari
pemotretan, misalnya pemotretan sekumpulan orang, foto alam, atau rerumputan
terdiri dari warna yang berbeda dan tidak cocok untuk format GIF atau PNG.
Links
Link merupakan fitur utama sebuah website karena dengan link, halaman website bisa
berpindah dari satu halaman ke halaman yang lain. Kemampuan berpindah dari satu halaman
ke halaman lain ini akhirnya memunculkan istilah browsing atau surfing.
Beberapa tipe link antara lain:
• Link dari satu website ke website yang lain
• Link dari satu halaman ke halaman yang lain pada website yang sama
• Link dari satu bagian ke bagian yang lain pada satu halaman yang sama
• Link yang membuka window baru
• Link berupa alamat email

Cara menuliskan link
Link dibuat dengan cara menuliskan element <a> dan diakhiri dengan </a>. User bisa
melakukan klik pada tulisan yang berada diantara <a> hingga </a>. Anda bisa menentukan
halaman yang menjadi target dari link yang anda buat dengan menggunakan atribut href.
Gambar 2.3 link
Teks yang berada di antara <a> dan </a> sebaiknya menjelaskan tentang target halaman yang
akan dikunjungi. Hal ini akan membantu pengguna saat ingin melakukan klik pada link
tersebut. Pada contoh diatas, teks yang menjadi link adalah “IMDB” yang menjelaskan bahwa
link yang akan dikunjungi merupakan website dari IMDB.
Link ke halaman website yang lain

Untuk membuat sebuah link yang mengarah ke halaman website yang lain, anda bisa
menuliskan
<a href=”http://www.eepis-its.edu”> Kampus PENS </a>
Saat anda ingin membuat sebuah link yang mengarah ke website yang lain, anda harus
menuliskan alamat domain dari website tersebut secara lengkap yang biasa disebut dengan
absolute URL. URL merupakan kepanjangan dari Uniform Resource Locator. Ini merupakan
alamat web yang anda tuliskan saat anda ingin mengunjungi halaman tertentu dari sebuah
website. Apabila anda tidak menuliskan detail halaman yang anda kunjungi, maka anda akan
dibawa ke halaman awal dari website tersebut.

Link ke halaman lain pada satu website yang sama
Saat anda ingin membuat sebuah link yang menuju halaman yang lain pada website yang
sama, anda tidak perlu menuliskan nama domain pada URL. Anda bisa menuliskannya dalam
bentuk relative URL.
<a href=”profil.html”> Profil Saya </a>

<a href=”galeri/foto.html”> Galeri</a>
30
Apabila target link anda berada dalam folder yang sama, anda bisa langsung menuliskan
nama file tersebut. Apabila target halaman anda berada dalam folder yang berbeda, anda bisa
langsung menuliskan lokasi folder tersebut dari lokasi file dimana anda menuliskan link anda.
Saat anda menuliskan relative URL, anda harus memperhatikan struktur folder dari website
anda. Mari kita ambil contoh struktur folder dari praktikum sebelumnya.
Gambar 2.4 Contoh struktur folder
Folder yang berada pada level paling atas biasa disebut dengan root folder. Folder images,
css dan video merupakan child folder dari folder root. Masing-masing folder berisi file
index.html. Berikut ini tabel berisi informasi detail tentang relative URL dan contoh
penggunaannya dengan mengacu contoh struktur folder di atas
Tipe Link Contoh Penulisan
Folder yang sama Untuk membuat link ke halaman about.html dari

root folder
Untuk membuat link pada file yang berada pada
folder yang sama, cukup tuliskan nama file yang <a href=”about.html”> Profil</a>
anda tuju

Child Folder Untuk membuat link ke halaman index.html yang
berada pada folder video.
Untuk membuat link yang mengarah pada file
yang berada di sub folder atau child folder, anda <a href=”video/index.html”> List Video</a>
perlu menuliskan terlebih dahulu nama folder
child tersebut
Parent Folder Untuk membuat link ke halaman index.html yang

ada di root folder dari file yang ada di folder
Untuk membuat link dari sub folder yang menuju
video
ke file yang ada di root folder, maka anda perlu
menggunakan “../”
Langkah Kerja
2. Buatlah folder baru didalam folder “Praktikum2” dengan nama “images”. Folder ini
berfungsi untuk menyimpan file-file gambar yang anda perlukan selama menyelesaikan
percobaan pada praktikum ini
3. Siapkan gambar-gambar yang akan anda gunakan pada praktikum ini. Sebaiknya ukuran
gambar tidak terlalu besar. Setidaknya berukuran maksimal 900x600 pixel.
HTML.
32
Percobaan
Percobaan 1: Memasukkan Gambar
Percobaan 2: Atribut Align

Percobaan 3: Atribut Height dan Weight
Percobaan 4: Atribut alt
Percobaan 5: Atribut hspace dan vspace
34
Percobaan 6: Memasukkan gambar dari folder lain
Percobaan 7 : Link ke Dokumen Lain

File berikut ini silahkan disimpan dengan nama judul.html
Selanjutnya simpan file berikut ini dengan nama berita.html dan pastikan berada satu
folder yang sama dengan file judul.html

Percobaan 8 : Alamat Absolut
36
Percobaan 9: Image Sebagai Link
Percobaan 10: Link Pada Halaman Yang Sama

Percobaan 11: Email Link
Tugas
Buatlah halaman website sesuai

dengan tampilan gambar
disamping. Isi dan gambar tidak
harus sama dengan gambar
disamping, akan tetapi susunan
atau tata letak harus sama.
Pastikan setiap judul dan gambar
berisi link dan apabila diklik akan
menampilkan detail berita. Pada
laporan bagian tugas ini, script
yang ditulis cukup pada halaman
utama dan satu halaman detail isi.
38
PRAKTIKUM 3
List Dan Tabel
Tujuan:
- Mahasiswa mampu memahami list
- Mahasiswa mampu menerapkan list berurutan dan tidak berurutan
- Mahasiswa mampu memahami tabel
- Mahasiswa mampu menerapkan tabel dalam web
Dasar Teori
Pada praktikum ini, anda akan mempelajari tentang list dan tabel. Pada masing-masing
topik akan terdepat penjelasan pada bagian dasar teori ini.
List
Saat membuat sebuah dokumen website, maka seringkali kita membutuhkan list untuk
membuat sebuah daftar. Misalnya daftar urutan proses menyelesaikan sesuatu. HTML
menyediakan elemen-elemen yang bisa kita gunakan untuk membuat list. Ada tiga tipe list
yang bisa kita gunakan
- Ordered List atau list yang berurutan merupakan sebuah daftar dimana akan ada
nomor yang berurutan di tiap itemnya. Misalnya pada sebuah resep berisi daftar urutan
langkah yang harus dikerjakan
- Unordered List atau list yang tidak berurutan merupakan sebuah list yang tidak
menggunakan urutan nomer pada tiap itemnya melainkan ditandai dengan bullet atau
lingkaran kecil.
- Definition List merupakan sebuah list yang biasa digunakan untuk menjelaskan
sebuah istilah. Biasanya didahului dengan nama istilah dan dilanjutkan dengan
pengertian dari istilah tersebut
A. Ordered List
<ol>
Langkah urutan menyimpan file di Miscrosoft Word
Ordered list dibuat dengan
menuliskan elemen <ol> <ol>
<li> Klik menu File. pilih Save </li>
<li> Beri nama file yang akan disimpan </li>
<li> <li> Klik tombol Save atau tekan Enter </li>
Tiap item yang ada pada list
</ol>
ditulis diantara opening tag <li>
dan closing tag </li>.

Secara default yang akan muncul
adalah list secara berurutan
dengan model nomor 1,2,3 dan
seterusnya.
Untuk merubah model
penomoran, kita bisa
menggunakan atribut type. Akan
tetapi hal ini lebih baik dilakukan
dengan menggunakan CSS.
B. Unordered List
<ul>
<ul>
Unordered list dibuat dengan menuliskan
elemen <ul> <li>Indonesia</li>
<li>Malaysia</li>
<li>Thailand</li>
<li> <li>Singapura</li>
Setiap item pada unordered list berada </ul>
diantara opening tag <li> dan </li>. <li>
merupakan kepanjangan dari list item
Secara default, website akan menampilkan
unordered list dalam bentuk bullet.
Untuk merubahnya bisa dengan menggunakan
atribut type. Akan tetapi lebih baik
menggunakan CSS dengan property
list-style-type
C. Definition List
<dl>
<dl>
Daftar dari
definisi-definisi atau <dt>Hosting</dt>
definition lists dibuat <dd>Hosting adalah Hosting adalah jasa layanan internet yang
dengan menuliskan menyediakan sumber daya server-server untuk disewakan
elemen <dl> sehingga memungkinkan organisasi atau individu menempatkan
informasi di internet</dd>
<dt>Domain</dt>
<dt> <dd>adalah nama unik yang diberikan untuk mengidentifikasi
Elemen <dt> akan nama server komputer seperti web server atau email server di
berisi istilah yang jaringan</dd>
perlu didefinisikan </dl>
40
<dd>
Definisi atau
penjelasan dari
istilah berada
diantara opening tag
<dd> hingga closing
tag </dd>

Tabel
Tabel biasa digunakan untuk menampilkan berbagai informasi yang perlu ditampilkan
secara detail dan melibatkan beberapa pengelompokan. Misalnya informasi untuk hasil
klasemen sementara dari sebuah pertandingan, informasi nilai siswa dan lain-lainnya. HTML
menyediakan elemen untuk membuat table yakni dengan menggunakan <table>
<table>
<table>
Elemen <table> digunakan untuk membuat
sebuah tabel, Isi tabel dibuat per baris <tr>
<th>No</th><th>Nama</th>
</tr>
<tr> <tr>
Elemen <tr> menandai dibuatnya sebuah baris <td>1</td>
baru pada tabel. Elemen tr merupakan
kepanjangan dari table row. Untuk mengakhiri <td>Eko Budi Santoso</td>
baris yang telah dibuat, ditulis closing tag </tr> </tr>
<tr>
<td>2</td>
<td>Yuda Arif Hermawan</td>
</tr>
</table>
<th>
Elemen ini berfungsi sebagai heading dari kolom
atau baris. Biasanya berisi nama kategori dari
data yang ditampilkan. Elemen ini merupakan
kepanjangan dari table heading
<td>
Setiap data pada table berada pada sebuah sel.
Sebuah sel dibuat dengan menggunakan elemen
<td>. Elemen ini merupakan kepanjangan dari
table data
Menggabungkan Kolom
Ada kalanya kita perlu

memasukkan data yang perlu
42
menggabungkan beberapa kolom <table border="1">
menjadi satu, dalam tabel HTML <tr>
biasa dikenal dengan istilah
spanning column yang disingkat <th></th>
dengan colspan. <th>9:00</th>
<th>10:00</th>
Untuk menggabungkan kolom ini, <th>11:00</th>
kita bisa menggunakan atribut
<colspan>. Atribut ini bisa <th>12:00</th>
diterapkan dalam elemen <th> </tr>
ataupun <td> dengan memberikan
informasi jumlah kolom yang <tr>
digabungkan. <th>Senin</th>
Pada contoh disamping, <td colspan="2">Web Desain</td>
ditampilkan data tentang jadwal
<td>Audio Video</td>
perkuliahan, dimana pada salah
satu mata kuliah terlihat bahwa <td>Animasi 2D</td>
menggabungkan 3 kolom sekaligus. </tr>
Apabila anda menggunakan
Microsoft Excel, langkah ini biasa <tr>
dikenal dengan merge. <th>Selasa</th>
<td colspan="3">Praktikum Web</td>
<td>Dasar Komunikasi</td>
</tr>
</table>
Saat anda menuliskan colspan,

maka jumlah elemen <td> atau
<th> yang perlu dituliskan, akan
berkurang. Seperti pada contoh
disamping, jumlah elemen <td>
pada baris kedua dan ketiga lebih
sedikit apabila dibandingkan
dengan baris pertama.
Pada contoh tersebut, ditambahkan atribut border agar pada tabel muncul garis-garis pemisah.
Hal ini bertujuan untuk memudahkan dalam melihat hasil dari colspan. Pengaturan border dan
beberapa pengaturan tampilan tabel lainnya akan kita fokuskan pada bagian CSS.
Menggabungkan Baris
Selain menggabungkan kolom, tabel pada
HTML juga menyediakan atribut untuk <table border="1">
kebutuhan menggabungkan baris. atribut ini
adalah <rowspan>. Konsepnya sama dengan <tr>
colspan, bedanya adalah rowspan akan <th>Mata Kuliah</th>

menggabungkan baris, bukan kolom. Jumlah <th> Mahasiswa</th>
baris yang digabungkan juga perlu </tr>
dituliskan sebagai value dari atribut ini.
<tr>
Pada contoh disamping, ditampilkan data
mata kuliah dan nama mahasiswa yang <td rowspan="3"> Web Desain</td>
mengikuti mata kuliah terkait. <td>Amalia</td>
Saat anda menuliskan rowspan, anda perlu </tr>
menuliskan jumlah baris yang ingin anda
gabungkan. Elemen <td> yang terkena efek <tr>
dari penggabungan baris, tidak perlu anda <td>Eka</td>
tuliskan lagi.
</tr>
<tr>
<td> Fitria</td>
</tr>
</table>
Ini bisa dilihat pada baris ketiga dan

keempat, dimana elemen <td> cukup
dituliskan sekali. Akan tetapi elemen <tr>
yang menandai dibuatnya baris baru, tetap
perlu dituliskan sesuai dengan jumlah baris
yang dibuat.
Pada contoh disamping ditambahkan atribut
border untuk menampilkan garis pada tabel.
Lebih jauh tentang pengaturan garis ataupun
pengaturan tampilan lainnya pada tabel,
akan dipelajari pada bagian materi CSS
Langkah Kerja
2. Buatlah folder baru didalam folder “Praktikum2” dengan nama “images”. Folder ini
berfungsi untuk menyimpan file-file gambar yang anda perlukan selama menyelesaikan
percobaan pada praktikum ini
3. Siapkan gambar-gambar yang akan anda gunakan pada praktikum ini. Sebaiknya ukuran
gambar tidak terlalu besar. Setidaknya berukuran maksimal 900x600 pixel.
44
HTML.
Percobaan
Percobaan 1: List Tidak Berurutan
Percobaan 2 : List Berurutan
Percobaan 3: List Berurutan Dengan Tipe i

Percobaan 4 : List Didalam List
Percobaan 5 : Tabel sederhana
46
Percobaan 6 : Tabel
Percobaan 7 : Atribut Rowspan

48
Percobaan 8: Atribut Colspan
Percobaan 9 : Background Tabel

Percobaan 10 : Atribut Align
50
Percobaan 11 : Tabel Border

Percobaan 12 : Tabel di dalam tabel
52
Tugas:
Buatlah suatu halaman web yang menampilkan data pegawai seperti dibawah ini:

PRAKTIKUM 4
FORM
Tujuan:
- Mahasiswa memahami elemen-elemen form
- Mahasiswa memahami cara membuat form pada website
- Mahasiswa memahami cara kerja form
- Mahasiswa memahami elemen baru dan validasi form pada HTML5
Dasar Teori
Dalam kehidupan sehari-hari kita sering menjumpai form dalam bentuk tercetak pada
kertas yang bertujuan untuk mengumpulkan informasi pada kotak-kota yang disediakan.
HTML meminjam konsep form ini untuk diterapkan pada web dengan menggunakan
elemen-elemen yang berbeda dengan tujuan yang sama yaitu memperoleh informasi dari
pengunjung website yang kita buat.
Pada topik ini kita akan mempelajari bagaimana membuat sebuah form pada website
dengan menggunakan berbagai elemen yang disediakan oleh HTML. Beberapa pengaturan
form yang ditambahkan pada HTML5 juga akan kita pelajari.
Pada aktifitas keseharian kita diinternet, sering sekali kita berinteraksi dengan sebuah form.
Misalnya yang populer adalah kotak pencarian Google. Selain dipergunakan untuk pencarian,
sebuah form bisa juga dipergunakan pada berbagai fungsi online lainnya. Misalnya saat kita
mendaftar sebagai member sebuah situs, atau saat kita berbelanja online.
Saat mengumpulkan informasi dari pengunjung website, kita bisa menggunakan beberapa
tipe form.
Menambahkan Teks
Text Input Password Input Text Area
Dipergunakan untuk mendapatkan Mirip dengan teks input, akan digunakan untuk memperoleh
input satu baris, misalnya email tetapi karakter yang ditulis akan informasi yang membutuhkan
atau nama ditutup. lebih dari satu baris
Membuat Pilihan
Radio Buttons Checkboxes Drop-down Boxes
Dipergunakan untuk meminta Pengunjung dapat memilih lebih Dipergunakan saat meminta
pengunjung memilih salah satu dari satu pilihan dari sekian pilihan pengunjung memilih salah satu
dari sekian pilihan yang ada yang disediakan dari list pilihan yang disediakan
Mengirimkan Form
Submit Button Image Button Upload File
Merupakan tombol yang Sama halnya dengan submit button, Dipergunakan untuk upload file
digunakan untuk mengirim data akan tetapi menggunakan gambar
dari form ke halaman lain sebagai tombol
Alur Kerja Form

Setelah selesai mengisi form, pengguna akan menekan tombol atau button untuk mengirimkan
informasi ke server.
56
Gambar 4.1 Alur kerja form
Sebuah form memiliki beberapa kotak input dan sering juga terdiri dari beberapa jenis
input. Masing-masing input ini berguna untuk mengumpulkan informasi dari pengunjung web.
Server perlu mengetahui informasi yang diterima berasal dari input data pada elemen yang
mana.
Sebagai solusi dari kebutuhan ini, maka tiap elemen pada form selalu memiliki atribut
name. Pada sebuah form, name atau nama tiap elemen tidak boleh sama untuk informasi yang
berbeda. Kecuali untuk model input radio dan checkbox yang berupa pilihan, akan memiliki
name atribut yang sama.
Struktur Form

<form
<form> action=http://www.kangtanto.com/daftar.ph
Form dibuat dengan menuliskan elemen p method=”get”>
<form>. Element ini harus diikuti atribut <p> Ini area form untuk menaruh berbagai
action yang merupakan tujuan pengiriman jenis input</p>
data form dan biasanya memiliki method
dan atribut id. </form>
action
Merupakan tujuan kemana informasi dari
form akan dikirim. Isinya biasanya berupa
URL ke halaman yang akan mengolah
informasi setelah form dikirim
method
Dengan menggunakan metode post, data
Informasi pada form dapat dikirim dengan dikirim melalui sebuah cara yang biasa disebut
dua cara atau metode yaitu get atau post dengan http headers. Metode ini biasanya
dipakai pada saat:
Dengan menggunakan metode get, isi dari - memperbolehkan pengguna melakukan
form akan ditambahkan pada akhir dari upload file.
URL yang ditulis pada atribut action. Cara - Informasi cukup panjang
ini cocok untuk:
- Mengandung data yang sensitif
- form yang pendek, misal kotak
pencarian - Mengandung isi tertentu, misalnya
password
- Saat anda hanya menerima data
dari server(bukan informasi yang - Menambah atau menghapus data pada
harus ditambahkan atau dihapus database
dari database
58
Text Input
<form
<input> action=http://www.kangtanto.com/daftar.ph
element <input> berguna untuk membuat p method=”get”>
beberapa tipe kontrol, jenisnya tergantung <p> Username
pada atribut type.
<input type=”text” name=”username”
size=”15” maxlength=”30” />
</p>
</form>
type=”text”
Isi pada atribut type ini menentukan jenis
input, pada contoh ini merupakan input
teks untuk satu baris.
name maxlength
Saat user mengisi informasi pada form, Merupakan panjang maksimal dari karakter
server perlu mengetahui informasi yang bisa dimasukkan pada kotak input. Isinya
tersebut diisi pada elemen yang mana. merupakan jumlah karakter yang bisa
Maka dari itu setiap elemen form dimasukkan oleh pengguna. Misalnya anda
membutuhkan name masing-masing. membuat kotak input untuk tahun, anda bisa
membatasinya menjadi 4 karakter.
size
Untuk mengatur ukuran panjang kotak
form. Ini biasa digunakan pada form
model lama, pada saat ini pengaturan
melalui CSS

Atribut RADIO
Input dengan atribut radio adalah menampilkan beberapa pilihan untuk dipilih satu dari
beberapa pilihan tersebut. Seperti pilihan jurusan di PENS (Elektronika, Telkom, Listrik,
Informatika), jenis kelamin (Pria/ Wanita), usia (Anak-anak, Remaja, Dewasa), jenis mobil
(sedan, pickup, station, combi, kodok, jeep, truck, trailer), jawaban pilihan soal (A, B, C, D,
E) dan lain-lain
Atribut CHECKBOX
Seperti telah dikatakan diatas bahwa untuk membuat pilihan ganda maka digunakan tag
input dengan atribut CHECKBOX, sehingga dapat dipilih beberap pilihan dari pilihan yang
telah disediakan. Jadi memungkinkan untuk memilih semua pilihan yang tersedia.
Dengan memodifikasi dari script HTML diatas yaitu mengganti atribut RADIO dengan
atribut CHECKBOX, maka didapatkan tampilan yang berbeda, dimana pada tampilan
Gambar 5.2 diatas pilihan disajika dalam bentuk lingkaran dengan titik sebagai tanda
pilihannya sedangkan bila menggunakan atribut CHECKBOX, maka pilihan disajikan dalam
bentuk pilihan kotak dengan tanda cawang sebagai pilihannya.
Atribut BUTTON dan SUBMIT

Penggunaan atribut ini berkaitan erat dengan tag <form> (dijelaskan lebih lanjut pada
Sub Bab 5.2 dibawah), dimana semua data input yang berada didalam tag <form> akan
dikirimkan ke server apabila input yang berupa tampilan tombo diklik.
Tag Select & Option

Disamping hal tersebut diatas tag <form> juga dapat digunakan untuk pembuatan menu
‘drop down’, sehingga pilihan akan ditampilkan bila diklik pada pilihan menu tersebut, dan
dapat dipilih satu dari beberapa pilihan kemudian ditampilkan pada pilihan paling atas,
dimana pilihan yang ditampilkan tersebut merupakan pilihan yang dipilih.
Tag Area
Tag ini digunakan untuk memasukkan data teks dengan ukuran melebar kebawah (seperti
editor), sehingga harus ditentukan panjang dan lebar dari area teks yang akan digunakan
sebagai data input data.
Langkah Kerja
60
HTML.
Percobaan
Percobaan 1: Tag Input
Percobaan 2: Atribut Radio

Percobaan 3: Atribut Checkbox
Percobaan 4: Atribut Button dan Submit
62
Percobaan 5: Select dan Option
Percobaan 6: Tag Area

Percobaan 7: Tag Form
Percobaan 8: Penggunaan Label

Silahkan anda klik pada teks disamping input radio dari hasil percobaan ini.
64
Percobaan 9: Pengelompokan Form
Percobaan 10: Validasi Form Pada HTML5

Hasil dari kode di bawah ini, silahkan anda isi pada kotak input user name saja dan tekan
submit. Perhatikan apa yang muncul
Percobaan 11 : Input Tanggal

Pada percobaan ini, silahkan anda coba dalam beberapa browser seperti Firefox, Chrome

atau Safari dan lihat hasilnya.
Percobaan 12: Email Input

Pada percobaan ini, silahkan tampilkan hasilnya pada browser dan isi pada kotak input
berupa isian sembarang dan bukan merupakan alamat email. Kemudian tekan submit. Amati
hasilnya
Percobaan 13: Search Input
66
Tugas
Buatlah 2 buah form yakni:
1. Form login
Form ini berisi username dan password dan tombol login. Pada kotak password tidak
ditampilkan huruf atau angka yang dituliskan, melainkan ditampilkan dalam bentuk karakter *
atau bulatan, seperti di bawah ini:
2. Form advanced search

Buatlah form seperti di bawah ini:

Praktikum 5
Flash, Video dan Audio
Tujuan
- mahasiswa memahami cara menambahkan dokumen Flash ke halaman website
- Mahasiswa memahami cara menambahkan video dan audio ke halaman website
- Mahasiswa memahami element <video> dan <audio> pada HTML5
Dasar Teori
Flash merupakan teknologi yang cukup popular yang digunakan untuk menambahkan
animasi, video dan audio pada website. Pada topik ini akan dibahas cara menambahkan
dokumen flash ke halaman website. Pembahasan selanjutnya adalah cara menambahkan audio
dan video pada website menggunakan elemen baru pada HTML5 yaitu <video> dan <audio>.
Flash
Sejak akhir tahun 90an, Flash telah menjadi software yang cukup popular untuk membuat
animasi dan juga digunakan untuk memainkan video dan audio. Untuk membuat animasi pada
Flash, anda memerlukan software Adobe Flash yang merupakan salah satu produk yang dijual
oleh Adobe.
Saat anda membuat dokumen flash, maka file tersebut akan disimpan dengan ekstensi .fla.
Agar bisa anda gunakan pada website, anda perlu mengeksportnya menjadi file dengan
format .swf. Apabila dokumen Flash telah di eksport kedalam format .swf, maka flash akan
membuat kode yang bisa anda gunakan untuk menempelkannya ke halaman website.
Biasanya kode tersebut menggunakan kode HTML <object> dan <embed>. Saat ini cara yang
menggunakan javascript juga banyak ditemui
Untuk menampilkan dokumen Flash, browser membutuhkan sebuah plugin bernama Flash
Player. Anda bisa mendownloadnya secara gratis pada website Adobe.com.
Perkembangan Flash
Saat Flash pertama kali diluncurkan, sebenarnya dikembangkan untuk membuat animasi.
Seiring dengan perkembangan teknologi, para pengguna mulai memanfaatkannya untuk
membuat media player dan bahkan membuat keseluruhan websitenya dengan menggunakan
Flash.
Saat ini tidak terlalu banyak website yang menggunakan Flash, beberapa alasannya adalah:
- Pada kisaran tahun 2005-06 mulai bermunculan kumpulan kode-kode javascript atau
biasa disebut Javascript Libraries seperti misalnya script.aculo.us, Protoype, dan
Jquery. Javascript library ini sangat memudahkan pengguna untuk membuat animasi
dengan javascript, sehingga browser tidak tergantung pada plugin
- Pada tahun 2007, Apple meluncurkan iPhone yang disusul tahun 2010 mereka
mengeluarkan iPad yang pada akhirnya memutuskan untuk tidak mendukung Flash
pada perangkat-perangkat Apple.
- Ada semacam hukum yang dikenalkan untuk memastikan bahwa website dapat
68
digunakan oleh mereka yang mengalami kendala pada pandangan atau cacat fisik
lainnya. Pada bagian ini, Flash banyak mendapat kritikan karena isi dari dokunen
Flash sering kali bermasalah terkait hal tersebut.
- Pada tahun 2008, browser mulai memberi dukungan pada HTML5 yaitu salah satunya
pada elemen <video> dab <audio>. Pada saat penulisan buku ini, Flash masih
merupakan cara yang popular untuk memainkan video dan audio pada website, akan
tetapi semakin banyak pula yang mulai berpindah ke HTML5.
Menambahkan Dokumen Flash

Untuk menambahkan dokumen flash ke halaman website, ada beberapa cara yang bisa
digunakan, mulai dari elemen HTML5, javascript atau menggunakan eksternal source.
1. Menggunakan <embed>
Elemen <embed> merupakan salah satu elemen baru pada HTML5 dan saat ini telah
didukung oleh hampir semua browser yang banyak digunakan saat ini.
2. Menggunakan Javascript
Cara ini merupakan cara yang paling banyak digunakan. Terdapat beberapa script yang
bisa digunakan untuk menambahkan dokumen flash pada halaman website tanpa anda
perlu mempelajari secara mendalam tentang Javascript. Salah satunya adalah
SWFObject yang bisa anda download secara gratis dari Google.
Salah satu keuntungan dari cara ini adalah anda bisa menyediakan isi yang lain sebagai
alternatif saat browser pengunjung web anda belum mendukung Flash.
Memahami Format Video dan Pemutarnya

Untuk menambahkan video pada website anda, ada dua hal yang perlu dipahami, yaitu
format video dan player yang digunakan untuk memutar video tersebut. Biasanya berupa
plugin.
Format
Video tersedia dalam format yang cukup banyak, sebut saja BluRay, DVD, VHS dan
beberapa yang lainnya. Pada kebutuhan video untuk online, terdapat lebih banyak format
yang digunakan, misalnya AVI, Flash Video, H264, MPEG, Ogg, Theora, QuickTime, WebM,
dan Windows Media.
Seringkali sebuah browser tidak dapat memutar video yang ingin ditampilkan, hal ini
biasanya karena browser tersebut tidak mendukung format file dari video yang ingin
ditampilkan. Agar pengunjung dapat melihat video yang ingin anda tampilkan, anda perlu
merubah format filenya ke format yang lain. Proses merubah format ini biasa disebut dengan
encoding.
Terdapat beberapa layanan online yang menyediakan jasa perubahan format ini, salah
satunya adalah www.mirovideoconverter.com.
Player/plugin
Browser sejatinya didesain untuk menampilkan teks dan gambar saja. Karena alasan ini,

browser yang dibuat sebelum tahun 2010 biasanya membutuhkan program bernama player
atau plugin yang perlu diinstall agar browser bisa menampilkan video. Player atau plugin
biasanya hanya mendukung format tertentu.
Saat modul ini ditulis, browser baru saja mengalami evolusi yakni dukungan terhadap
elemen baru pada HTML5 yakni elemen <video>. Akan tetapi kita tidak bisa mengandalkan
pengunjung website kita menggunakan browser terbaru yang telah mendukung elemem baru
pada HTML5 tersebut. Browser yang mendukung elemen baru tersebut, juga mewajibkan
video dirubah ke format file yang berbeda.
Pendekatan
Cara paling mudah untuk menambahkan video pada website anda adalah dengan
menggunakan jasa layanan video seperti YouTube atau Vimeo. Akan tetapi terdapat beberapa
hal yang menyebutkan bahwa penggunaan layanan ini tidaklah tepat, sehingga anda perlu
menempatkan video anda pada layanan hosting anda sendiri.
Pada saat penulisan modul ini, untuk memastikan sebagian besar orang bisa memainkan
content video , dianjurkan bahwa sebaiknya menggunakan elemen HTML5 <video> untuk
browser yang sudah mendukungnya. Bisa juga menggunakan format video Flash untuk
browser yang belum mendukung elemen HTML5 <video>. Dengan cara ini, anda harus
mengupload video mana saja yang ingin anda tampilkan dan setidaknya dalam 2 format yang
berbeda yakni WebM dan MP4.
5.2 Menggunakan Layanan Video
Keuntungan
Layanan upload video seperti Youtube menyediakan player yang didukung oleh sebagian
besar browser yang banyak digunakan oleh para pengunjung web. Anda tidak perlu
mengkhawatirkan tentang format video yang anda gunakan, karena layanan seperti Youtube
memperbolehkan kita untuk mengupload video dalam beberapa format. Saat selesai upload,
layanan tersebut akan secara otomatis merubah formatnya menjadi beberapa jenis format
yang diperlukan untuk berbagai jenis browser yang berbeda.
Apabila kita meletakkan file video kita di web kita sendiri, adakalanya perusahaan
hosting tempat kita menyewa akan meminta tambahan biaya karena bandwidth yang kita
gunakan cukup besar dan yang paling kelihatan adalah ukuran file web kita akan jauh lebih
besar bila dibandingkan tanpa menambahkan file video. Perlu diketahui bahwa semakin besar
ruang hosting yang kita sewa, maka semakin mahal pula kita harus membayar.
Apabila anda menaruh video anda pada layanan seperti Youtube atau Vimeo, anda tidak
perlu khawatir lagi terhadap bandwidth dan ukuran file website anda.
Kekurangan
Video anda hanya akan tersedia disitus layanan video tersebut, sehingga apabila anda
ingin video anda secara eksklusif hanya ada di website anda, anda perlu menaruh sendiri
filenya di website anda melalui layanan hosting yang anda gunakan dan tidak kalah penting
lagi anda harus menyiapkan player tersendiri untuk menampilkan video tersebut.
Beberapa layanan juga akan membatasi apa yang perlu anda taruh pada video anda.
Misalnya mereka melarang adanya iklan di video yang anda upload. Beberapa layanan video
biasanya akan memainkan iklan mereka tersendiri sebelum video anda diputar. Kualitas video
pada beberapa layanan video upload juga dibatasi
70
Menyiapkan Flash Video
Terdapat setidaknya 3 langkah utama untuk menambahkan video berformat flash pada
website anda.
1. Merubah video ke format FLV
Agar dapat memainkan Flash Video, anda perlu merubah format video anda ke format
FLV. Sejak Flash 6, Flash telah dilengkapi Flash Video Encoder untuk merubah ke
format FLV.
2. Menemukan FLV Player

Anda membutuhkan sebuah player untuk memainkan file FLV. Tujuannya adalah
untuk membungkus file FLV dan menambahkan kontrol untuk play/pause. Salah satu
player open source yang bisa anda gunakan adalah OS FLV Player.
3. Memasukkan Player dan Video pada halaman website anda
Anda bisa menambahkan player FLV ke halaman web anda dengan menggunakan
teknik Javascript. Anda juga perlu memberitahukan ke player dimana lokasi file video
yang ingin dimainkan.
5.3 HTML5 : Video

Pada saat penulisan modul ini, elemen <video> merupakan salah satu elemen baru pada
versi HTML5. Elemen ini hanya didukung oleh browser-browser dengan versi terbaru,
sehingga apabila anda ingin video anda bisa dilihat oleh semua browser baik versi yang lama
atau yang baru, anda tidak bisa hanya mengandalkan elemen ini untuk menempelkan video ke
halaman website anda. Anda perlu mengkombinasikan andatar HTML5 dengan Flash Video.
Tidak semua browser mendukung format yang sama, sehingga anda perlu menyiapkan
video dengan beberapa format. Saat penulisan buku ini, format yang didukung oleh beberapa
browser yang paling banyak dipakai oleh pengguna internet antara lain adalah H264 yang
didukung oleh IE dan safari. Format berikutnya adalah WebM yang didukung oleh Android,
Chrome, Firefox dan Opera.
Saat sebuah video ditempelkan pada halaman website, maka browser akan menyediakan
mekanisme kontrol sendiri untuk pemutarnya dan modelnya bisa jadi beragam dan berbeda
pada tiap browser.
Menambahkan video dengan elemen <video>

Untuk menambahkan video dengan menggunakan elemen baru HTM5 tersebut, kita
cukup menuliskan tag <video> diikuti dengan beberapa atribut. Contohnya seperti di bawah
ini.

<video src="video/puppy.mp4" <video>
poster="images/puppy.jpg" Elemen <video> memiliki sejumlah atribut
width="400" height="300"
preload
yang bisa anda gunakan untuk
controls mengendalikan pemutaran video
loop>
src
Atribut ini berfungsi untuk menentukan
alamat file video.
controls poster
Apabila digunakan maka atribut ini Atribut ini memungkinkan anda untuk
mengindikasikan bahwa browser harus menggunakan sebuah gambar sebagai
menyediakan kontrol untuk memutar atau tampilan awal selagi menunggu file video
menghentikan video selesai didownload
loop autoplay
Apabila atribut ini dituliskan, maka video Apabila atribut ini dituliskan, maka video
akan diputar kembali sesaat setelah video akan secara otomatis dimainkan
selesai dimainkan
preload
Pada HTML5 anda tidak perlu menuliskan Atribut ini akan memberitahukan ke browser
semua nilai pada tiap atribut. Misalnya untuk apa yang perlu dilakukan saat halaman
atribut control, autoplay dan loop yang dimuat atau diload. Atribut ini bisa berisi
berada dalam elemen <video>. Atribut-atribut salah satu dari tiga nilai di bawah ini:
ini ibarat sebuah saklar yakni on dan off.
Apabila atribut-atribut dituliskan, maka akan
mengaktifkan opsi tersebut. Apabila atribut none
dihapus, maka opsi tersebut tidak dipakai
atau diaktifkan. browser tidak perlu mendownload video
sebelum pengguna menekan tombol play
Apabila sebuah browser tidak mendukung

elemen <video> atau format video yang auto
digunakan, maka browser hanya akan Browser akan mendownload video saat
menampilkan apa saja yang berada antara tag halaman dimuat atau diload
<video> dengan closing tag </video>
metadata
browser hanya akan mengumpulkan
informasi seperti ukuran, frame pertama,
track list dan durasi video
5.4 Menambahkan audio

Pada saat penulisan buku ini, format audio untuk halaman web yang paling banyak
dipakai adalah MP3. Untuk menambahkan audio, anda bisa memilih salah satu dari tiga
72
pilihan berikut ini:
1. Menggunakan layanan online
Terdapat beberapa situs yang menyediakan fasilitas untuk mengupload file audio dan
sekaligus menyediakan player yang bisa ditempelkan pada halaman website anda.
Contohnya seperti soundcloud.com dan myspace.com
2. Menggunakan Flash
Terdapat beberapa Flash movie yang bisa digunakan untuk memutar file MP3, mulai
dari yang sederhana hingga player yang kompleks yang memungkinkan anda untuk
membuat play list sendiri.
3. Menggunakan HTML5
HTML5 telah memperkenalkan elemen baru yakni <audio>. Browser yang
mendukung elemen ini akan menyediakan kontrol tersendiri, mirip dengan model
kontrol pada video.
Langkah Kerja
1. Tempatkan folder “Praktikum5” beserta isinya pada lokasi yang anda inginkan
2. Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder
tersebut
3. Anda akan memerlukan beberapa file yang ada didalam folder praktikum5, yakni file-file
yang berada dalam sub folder images dan js.
HTML.
Percobaan
Pada percobaan ini, anda harus menampilkan setiap percobaan pada browser Firefox,
Chrome, Opera dan Internet Explorer. Pastikan semua browser tersebut, kecuali Internet
Explorer merupakan versi terbaru. Screenshot setiap hasilnya pada tiap browser dan analisa.
Pada bagian laporan, sertakan detail versi dari tiap browser yang anda gunakan saat
praktikum.
Percobaan 1: Memasukkan dokumen flash menggunakan javascript

Percobaan 2: Memasukkan dokumen flash menggunakan elemen <embed>
Percobaan 3: Memasukkan file Flash Video
74
Percobaan 4: Memasukkan video dengan elemen <video>
Percobaan 5: Memasukkan Video dengan banyak source
Percobaan 6: Menambahkan Flash Mp3 Player

Percobaan 7: Menambahkan Audio HTML5
Percobaan 8: Menambahkan Audio HTML 5 dengan Banyak tipe format
Percobaan 9: Menggunakan iframe

Pada percobaan ini, silahkan anda isi pada bagian atribut src dengan nama salah satu file html anda yang berada
pada satu folder dengan percobaan ini. Anda juga bisa menggantinya dengan alamat sebuah web.
76
Tugas
1. Buatlah sebuah halaman yang memainkan file bertipe Flash yakni .swf, dan file video
berformat .mp4 dan webM. File .swf ditempelkan pada halaman web dengan
menggunakan swfObject.js. File video ditempelkan dengan menggunakan elemen baru
HTML5 yakni <video>. Pada elemen ini anda menyediakan dua alternatif format video
yakni .mp4 dan .webM. Apabila keduanya tidak disupport oleh browser, maka sebuah
teks penjelasan akan ditampilkan.
2. Buatlah sebuah halaman seperti pada rancangan dibawah ini. Setiap link mengacu pada
file-file hasil percobaan pada praktikum ini. Saat diklik, halaman tidak berganti, akan
tetapi hasil dari link akan ditampilkan pada iframe yang berada disebelah menu.
3.
FLASH, VIDEO, dan AUDIO
Flash dengan embed

Flash dengan javascript
Memainkan Flash Video
Memainkan Video HTML5
Memainkan Audio HTML5

78
PRAKTIKUM 6
Pengenalan CSS
Tujuan:
- Mahasiswa mampu memahami konsep dasar CSS
- Mahasiswa mampu memahami struktur dasar syntax CSS
- Mahasiswa mampu memahami penerapan warna pada CSS
Dasar Teori
CSS merupakan kepanjangan dari Cascading Style Sheet. CSS memungkinkan anda
untuk membuat aturan-aturan yang bisa digunakan untuk menentukan bagaimana isi dari
sebuah elemen ditampilkan. Misalnya anda bisa menentukan background sebuah halaman,
menentukan tipe font untuk paragraph, atau misalnya menentukan semua heading(h1,h2, dll)
berwarna biru dan italic.
Kunci dalam memahami cara kerja CSS adalah dengan membayangkan bahwa ada
semacam kotak yang tidak terlihat di tiap elemen HTML.
Pada halaman ini anda akan melihat sebuah halaman HTML sederhana. Pada contoh
halaman website di bawah ini adalah sebuah contoh halaman web sederhana yang terdiri dari
beberapa elemen mulai dari paragraf, heading dan div. Melalui CSS, ditambahkan garis tepi
pada tiap elemen tersebut, sehingga anda bisa melihat bagaimana CSS memperlakukan tiap
elemen seolah-olah elemen-lemen tersebut berada dalam sebuah box tersendiri.
CSS memungkinkan anda untuk memberikan aturan yang bisa digunakan untuk mengatur
tiap box (beserta isi di dalamnya) yang ditampilkan.
Pada contoh kali ini, level blok elemen ditampilkan dalam garis tepi berwarna merah
sedangkan inline elemen(misalnya span) ditampilkan dalam kotak berwarna biru.

Pada contoh di atas, elemen <body> membuat kotak terluar atau kotak pertama,
dilanjutkan dengan <h1>,<p> dan seterusnya. Apabila sebuah elemen terdapat elemen lain
didalamnya, maka sebuah box juga akan dibuat di dalamnya.
Dengan menggunakan CSS, anda bisa menambahkan garis ditiap tepi dari kotak, dengan
menentukan lebar dan tingginya atau menambahkan warna background. Anda juga bisa
mengatur teks yang berada dalam box tersebut, misalnya warna tulisan, ukuran dan jenis
huruf yang digunakan.
Aturan CSS Terkait Elemen HTML

Cara kerja CSS adalah dengan menghubungkan aturan yang dibuat dalam CSS dengan
elemen HTML. Aturan ini mengatur bagaimana isi dari sebuah elemen tertentu ditampilkan.
Aturan CSS ini terdiri dari dua bagian yaitu selector dan deklarasi.
Contoh aturan di atas mengindikasikan bahwa semua elemen <p> harus ditampilkan
dalam font Arial Typeface.
Selector mengindikasikan aturan CSS diterapkan pada elemen yang mana. Aturan yang
sama dapat diterapkan pada lebih dari satu elemen dengan dipisahkan tanda koma.
Declaration menunjukkan bagaimana elemen yang dimaksud akan ditampilkan. Misalnya
elemen yang diatur adalah paragraph, maka bagian declaration akan menunjukkan jenis font
yang digunakan, warna tulisan, dan aturan tampilan lainnya. Declarations dibagi menjadi dua
bagian yakni property dan value yang dipisahkan dengan tanda titik dua.
Deklarasi CSS berada diantara tanda kurawal dan setiap deklarasinya terdiri dari dua
bagian yaitu property dan value. Anda bisa menentukan beberapa property dalam sebuah
80
deklarasi yang masing-masing dipisahkan dengan tanda titik koma.
Contoh aturan di atas mengindikasikan bahwa semua elemen <h1>, <h2>, dan <h3> akan
ditampilkan dalam font berjenis Arial dan dengan warna kuning. Property menunjukkan
elemen yang ingin anda rubah tampilannya, misalnya warna tulisan, jenis font dan lain-lain.
Value menunjukkan setting yang ingin anda terapkan pada property. Misalnya anda
menentukan warna dari property, maka value ini berisi warna yang ingin anda terapkan.
Menggunakan CSS Eksternal
<link> Kode berikut disimpan sebagai file .html
Elemen <link> digunakan untuk

memberitahukan ke browser dimana lokasi
<!DOCTYPE html>
file CSS yang akan digunakan untuk
<html>
mengatur halaman web. Elemen ini tidak <head>
memerlukan closing tag dan berada di antara <title>Using External CSS</title>
elemen <head> dan </head>. <link href="css/styles.css" type="text/css"
rel="stylesheet" />
</head>
href <body>
<h1>Kentang</h1>
Bagian ini berisi path atau lokasi dari file <p>Terdapat berbagai jenis kentang yang
CSS bisa anda konsumsi. .</p>
</body>
</html>
type
Atribut ini menentukan tipe dokumen yang
menjadi rujukan. Isinya seharusnya
“text/css”

rel Kode berikut disimpan sebagai file style.css
atribut ini menentukan hubungan antara file

body {
css dengan dokumen HTML yang merujuk font-family: arial;
ke file css tersebut. Isi dari atribut tersebut background-color: rgb(185,179,175);}
adalah stylesheet saat merujuk ke file CSS h1 {
color: rgb(255,255,255);}
Sebuah halaman HTML dapat menggunakan lebih dari satu file CSS. Untuk melakukan
hal ini, maka dapat membuat elemen <link> sebanyak file CSS yang digunakan. Adakalanya
seorang desainer menggunakan 1 file CSS untuk mengatur layout, file CSS yang lain
digunakan untuk mengatur font dan warna.
Menggunakan Internal CSS
<style>
<!DOCTYPE html>
<html> Anda juga bisa menyisipkan aturan CSS
<head> kedalam halaman HTML dengan cara
<title>Using Internal CSS</title> menempatkan elemen <style>, yang
<style type="text/css">
body {
biasanya berada diantara elemen <head>
font-family: arial; dan </head>
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);} Elemen <style> menggunakan atribut
</style> type yang menunjukkan bahwa style yang
</head>
<body>
ditentukan berupa CSS.
<h1>Kentang</h1>
<p>Terdapat berbagai jenis kentang yang bisa anda
konsumsi sebagai pengganti nasi.</p> Saat membuat sebuah website dengan
</body> jumlah halaman lebih dari satu, anda
</html> sebaiknya menggunakan eksternal CSS,
karena:
- memungkinkan semua halaman
untuk mengacu pada satu style
Pada HTML5, anda cukup menuliskan elemen CSS. Hal ini efektif daripada anda
82
<style> tanpa perlu menuliskan atribut pada harus mengulang penulisan
elemen tersebut. disetiap halaman
- Tetap memisahkan antara isi
halaman dengan pengatur
tampilan
- Anda cukup merubah satu file
untuk merubah seluruh tampilan
halaman
Selector CSS

Terdapat banyak tipe CSS selector
<!DOCTYPE html>
yang memungkinkan anda untuk
<html>
mengatur elemen tertentu dalam <head>
dokumen HTML <title>CSS Selectors</title>
</head>
<body>
Pada contoh kode HTML <h1 id="top">Beberapa Teknologi Web</h1>
<p id="introduction">Beberapa teknologi web yang
disamping merupakan contoh berkembang.</p>
selector yang sering dipakai pada <h2>Web</h2>
CSS. <ul>
<li>
<a href="html5.html">Teknologi
Penulisan CSS selector perlu HTML5</a></li>
<li>
diperhatikan karena case sensitive <a href="css3.html"> Teknologi CSS3</a></li>
yang berarti besar kecil huruf juga <li><a href="javascript.html"> Teknologi
berpengaruh. Javascript</a></li>
</ul>
<p class="note">
Terdapat beberapa selector tingkat halaman ini ditulis oleh
<a href="mailto:tanto@kangtanto.com">
lanjut yang bisa anda gunakan tanto@kangtanto.com</a> untuk
untuk memilih elemen berdasarkan <a href="http://www.example.org">
atribut dan value yang digunakan. kangtanto.com</a>.
Topik tentang ini akan dibahas </p>
lebih lanjut pada materi lain pada <p>
<a href="#top">Halaman Awal</a>
modul ini. </p>
</body>
</html>
Pada tabel berikutnya anda akan
melihat beberapa jenis selector
yang bisa anda gunakan pada
halaman website anda dan tentunya
sesuai dengan kebutuhan web anda.
Mulai dari selector yang universal,
berdasarkan class, berdasarkan id,
atau bahkan selector yang berada
dalam elemen lain.
Jenis Selector
Selector Kegunaan Contoh
Universal Selector Diaplikasikan pada semua elemen *{}

dalam dokumen HTML
akan menarget semua elemen
dalam halaman
Type Selector Sesuai dengan nama elemen h1, h2, h3 {}

Targetnya adalah elemen
84
<h1>,<h2>,dan <h3>
Class Selector Sesuai dengan elemen yang .note{}

memiliki atribut class dimana nama
menarget semua elemen dengan
atributnya dituliskan setelah tanda .
atribut class yang value-nya berisi
“note”
ID Selector Mengatur style pada elemen yang #isi{}

memiliki atribut id dimana value
menarget elemen yang memiliki
nya sesuai dengan yang dituliskan
atribut id yang valuenya berisi
setelah tanda “#”
“isi”. Misal <div id=”isi”>
Child Selector Mengatur style elemen yang li>a {}

merupakan “anak” atau sub elemen
menarget setiap elemen <a> yang
yang lain
merupakan anak dari element
<li>. Akan tetapi tidak untuk
semua elemen <a> yang berada
dalam satu halaman
Descendant Selector Mengatur style pada sebuah elemen p a {}

yang merupakan turunan dari
menarget elemen <a> yang berada
elemen lain yang dispesifikasikan
dalam elemen <p>, meskipun ada
elemen lain yang berada
didalamnya.
Adjacent Sibling Selector Mengatur elemen yang merupakan h1+p {}

elemen yang muncul pertama kali
menarget elemen <p> yang
setelah elemen yang ditentukan
muncul pertama kali setelah
elemen <h1> dan tidak berlaku
bagi elemen <p> yang lain
General Sibling Selector Mengatur elemen yang merupakan h1~p {}

“saudara kandung” atau muncul
apabila ada dua elemen <p> yang
setelah elemen yang dimaksud
muncul setelah elemen <h1>,
maka keduanya akan terkena efek
pengaturan style ini.
Urutan Penerapan Aturan CSS

Apabila ada dua atau lebih aturan CSS yang diterapkan pada elemen yang sama, maka
perlu diketahui yang manakah yang akan dipakai oleh elemen tersebut?

Apabila ada dua selector yang sama, maka selector yang terakhir kemunculannya yang
akan dipakai style-nya. Misalnya pada bari awal sebuah file CSS anda mengatur sebuah
elemen <a> selanjutnya diikuti oleh pengaturan elemen-elemen yang lain. Kemudian pada
beberapa baris sebelum baris terakhir, anda mengatur kembali elemen <a> tersebut dan berisi
property dengan value berbeda dari yang sebelumnya, maka style yang terakhir ini yang akan
dipakai. Pengaturan yang bagian awal seolah-oleh ditimpah oleh style yang baru.
Apabila sebuah selector lebih spesifik

*{
daripada yang lain, maka aturan yang lebih font-family: Arial, Verdana, sans-serif;}
spesifik lah yang akan dipakai. Misalnya h1 {
anda menuliskan kode CSS seperti di font-family: "Courier New", monospace;}
samping i{
color: green;}
i{
color: red;}
h1 lebih spesifik daripada * b{
p b lebih spesifik daripada p color: pink;}
pb{
p#intro lebih spesifik daripada p color: blue !important;}
pb{
color: violet;}
p#intro {
Catatan
font-size: 100%;}
Anda bisa menambahkan !important setelah p{
value dari property untuk mengindikasikan font-size: 75%;}
bahwa lebih penting daripada aturan yang
lain yang juga diterapkan pada elemen yang
sama
Dengan memahami bagaimana urutan penerapan aturan CSS, maka anda bisa menulis
stylesheet yang sederhana karena anda bisa membuat aturan yang sifatnya general atau umum
yang berlaku untuk sebagian besar elemen dan kemudian menimpahnya dengan aturan yang
lebih spesifik pada elemen-elemen yang ingin anda tampilkan secara berbeda.
Pewarisan (Inheritance)
Apabila anda menentukan jenis font atau

warna pada elemen <body>, maka ia <div class="page">
<h1>Web</h1>
akan diterapkan pada sebagian besar
<p>Teknologi web terus
elemen yang ada. Hal ini terjadi karena berkembang.</p>
property font-family diwarisi oleh <p>Seiring juga dengan
elemen-elemn sub nya. Hal ini akan perkembangan perangkat
membantu anda dalam menghemat waktu pengaksesnya.</p>
tanpa harus menuliskan satu persatu pada </div>
tiap elemen sesuai dengan jumlah
elemennya.
Anda bisa membandingkan dengan

property background-color atau border
yang tidak diwarisi oleh semua elemen
86
yang ada, karena hal ini akan sangat
merusak tampilan halaman web.
Anda juga bisa memaksa sejumlah body {

property untuk mewarisi value atau nilai font-family: Arial, Verdana, sans-serif;
dari elemen parent-nya dengan color: #665544;
menggunakan inherti padavalue property. padding: 10px;}
Pada contoh ini, elemen <div> dengan .page {
border: 1px solid #665544;
sebuah class bernama page mewarisi
background-color: #efefef;
ukuran padding dari aturan CSS yang padding: inherit;}
juga diterapkan dari elemen <body>
Color
Pada bagian ini akan dipelajari cara mengatur warna pada CSS. Pengaturan warna pada
CSS setidaknya memiliki tiga cara yang bisa anda pilih dan juga cara tambahan yang mulai
ada pada CSS versi 3. Beberapa istilah pada pengaturan warna ini juga akan dibahas.
Pemahaman tentang pengaturan warna ini selanjutnya akan dipakai pada saat membahas
tentang teks dan dan konsep boxes.
Foreground Color
Color
Property color memungkinkan anda untuk
menentukan teks didalam sebuah elemen.
Anda bisa menentukan warna dengan
menggunakan salah satu dari tiga cara
/* color name */
berikut ini h1 {
color: DarkCyan;}
/* hex code */
RGB Values h2 {
Cara ini menunjukkan warna dalam hal color: #ee3e80;}
banyaknya warna merah, hijau dan biru. /* rgb value */
p{
Misalnya rgb(100,100,90)
color: rgb(100,100,90);}
Hex Codes
Merupakan enam digit kode yang
mewakili jumlah dari warna merah, hijau
dan biru dalam sebuah warna. Diawali
dengan karakter #

Color Names
Merupakan warna sejumlah 147 jenis
warna yang telah didefiniskan sebelumnya
yang telah dikenali oleh browser.
Misalnya DarkCyan
Background Color
CSS memperlakukan setiap elemen HTML
layaknya berada dalam sebuah kotak dan
body {
background-color akan mengatur warna latar
background-color:
rgb(200,200,200);} belakang dari kotak tersebut.
h1 {
background-color:
DarkCyan;} Anda bisa menentukan pilihan untuk
h2 { background color dengan cara yang sama
background-color: #ee3e80;} seperti foreground color yakni dengan
p { menggunakan nilai RGB, kode Hexa, dan
background-color: white;}
dengan menuliskan nama warna.
Jika anda tidak menuliskan sebuah warna

untuk background, maka secara default
background akan transparan.
Secara default, sebagian browser memiliki

wawrna putih sebagai warna
background-nya. Akan tetapi bisa saja
pengguna mengatur warna background bagi
browser mereka masing-masing. Jadi untuk
memastikan warna background web anda
adalah warna putih, anda bisa mengaturnya
pada elemen <body>
Mengenal Warna
Setiap warna pada layar komputer terbuat dari campuran sejumlah warna merah, hijau
dan biru. Untuk menemukan warna yang anda inginkan, anda bisa menggunakan software
yang menyediakan fasilitas pemilihan warna.
Monitor komputer terbuat dari ribuan kotak-kotak kecil yang bernama pixel. Saat monitor
tidak dinyalakan, warnanya akan hitam karena tidak menimbulkan cahaya sama sekali. Saat
dinyalakan, setiap pixelnya bisa memiliki warna yang berbeda yang akhirnya membentuk
sebuah gambar.
Warna tiap pixel pada layar ditampilkan dari hasil campuran antara merah, hijau dan biru,
sama halnya dengan layar televisi.
88
Fasilitas untuk memilih warna biasanya tersedia di beberapa program untuk editing
gambar, misalnya Photoshop dan GIMP. Anda bisa melihat nilai RGB yang anda tentukan dari
hasil warna yang dipilih. Selain itu anda juga bisa melihat nilai hexa yang ditandai dengan
awalan karakter berupa #. Selain itu anda bisa menggunakan tool yang tersedia secara online,
misalnya seperti coloschemedesigner.com
RGB Values Hex Codes Color Name
Nilai dari merah, hijau dan Nilai dari warna merah, hijau Warna dilambangkan
biru ditampilkan dalam dan biru dilambangkan dalam dengan nama warna yang
bentuk angka antara 0 kode hexadesimal telah didefinisikan
hingga 255 sebelumnya. Jumlah nama
warna ini cukup terbatas,
sekitar 147 warna. Selain
terbatas, juga cukup sulit
diingat, sehingga cara ini
jarang digunakan.
CSS3: Opacity
CSS3 memperkenalkan property opacity

yang memungkinkan anda untuk p.one {
menentukan opacity dari sebuah elemen background-color: rgb(0,0,0);
beserta sub elemennya. Nilainya antara 0.0 opacity: 0.5;}
hingga 1.0. Sehingga nilai 0.5 berarti 50% p.two {
opacity dan nilai 0.15 berarti 15% opacity. background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}
Property CSS3 rgba memunkinkan anda

untuk menentukan warna seperti pada
RGB, akan tetapi menyediakan nilai
keempat yang berupa nilai tambahan untuk
menentukan opacity. Nilai ini dikenal
dengan alpha value dan nilainya antara 0.0
hingga 1.1.
Karena beberapa browser versi lama belum

mendukung fitur ini, anda harus
menyiapkan pengaturan CSS sehingga
warna yang ditampilkan tidak akan
ditampilkan secara transparan.

90
Langkah Kerja
2. Buat folder css
HTML.
Percobaan
Selesaikan percobaan-percobaan di bawah ini dan analisa hasilnya
Percobaan 1: Pengenalan Syntax
Simpan file berikut dengan nama percobaan1.html
Simpan kode CSS ini di folder “css” dengan nama contoh.css

Percobaan 2: Menggunakan CSS Eksternal
Simpan file berikut dengan nama percobaan2.html
Simpan file berikut pada folder css dengan nama style.css
Percobaan 3: Internal CSS
92
Percobaan 4: Inline Style
Percobaan 5: Urutan Penerapan Style dari CSS
Pada percobaan ini, perhatikan urutan penerapan aturan dari CSS. Perhatikan penerapan pada
paragraf yang tanpa id dan dengan atribut id. Setelah berhasil keluar hasilnya, silahkan anda
coba hapus pada p#intro dan perhatikan hasilnya

Percobaan 6: Inheritance
Perhatikan style yang diatur di body, yang selanjutnya dipakai oleh semua elemen. Coba anda
rubah style pada bagian .page dengan menentukan jenis font yang baru.
94
Percobaan 7: Multiple Stylesheet
Pada percobaan ini, silahkan anda perhatikan, apakah style yang diterapkan pada halaman
berasal dari file mystyle.css ataukah yang dari satu file dengan halaman web tersebut.
Simpan dengan nama mystyle.css
Selanjutnya buat file html seperti dibawah ini:

Percobaan 8: Comments & Foreground Color
Perhatikan cara penulisan warna pada percobaan ini.
Percobaan 9: Background Color
96
Percobaan 10: Transparansi pada background
Pada percobaan ini perhatikan perbedaan background antara paragraph pertama dan kedua
Tugas
1. Buatlah sebuah halaman dengan background gambar, dan buatlah sebuah kotak
transparant yang didalamnya terdapat sebuah tulisan. Seperti contoh di bawah ini
2. Buatlah sebuah kotak gradient seperti gambar di bawah ini
98
PRAKTIKUM 7
Teks dan Background
Tujuan
- Mahasiswa dapat memahami pengaturan teks melalui CSS
- Mahasiswa dapat memahami berbagai jenis ukuran teks
- Mahasiswa dapat memahami pengaturan background melalui CSS
Dasar Teori
Pada materi kali ini akan dibahas tentang teks yang meliputi pemilihan font, pengaturan
format teks, dan beberapa property yang biasa digunakan pada teks. Selain itu juga akan di
bahas tentang background, baik background berupa warna atau gambar.
Teks
Pengaturan format pada teks sangat mempengaruhi kemudahan bagi pengunjung dalam
membaca halaman web anda. Property untuk pengaturan teks setidaknya dapat dibagi
kedalam dua kelompok, yaitu:
- Pengaturan yang langsung mempengaruhi font dan tampilannya di layar. Misalnya
seperti typeface yang didalamnya termasuk pengaturan tebal, normal, atau italic dan
juga pengaturan ukuran teks
- Pengaturan yang memiliki efek sama, tanpa mempertimbangkan jenis font yang anda
gunakan. Pengaturan ini termasuk warna teks dan jarak antar huruf atau antar karakter.
Terminologi Typeface
SERIF SANS-SERIF MONOSPACE
Jenis font ini memiliki detail Jenis font ini memiliki garis lurus Setiap huruf pada font monospace
ekstra pada tiap tepiannya. Detail hingga ujung karakter, sehingga memiliki lebar yang sama (dan
ini dikenal dengan nama serifs dari sisi design lebih terlihat bersih sebaliknya).
Dalam dunia percetakan, jenis Layar memiliki resolusi yang lebih Jenis font ini umum dipakai pada
font ini sering dipakai pada kecil daripada cetak, sehingga kode pemrograman karena mudah
penulisan yang panjang, karena apabla teksnya kecil, jenis untuk diikuti teksnya
karakter tulisan jenis ini mudah sans-serif dapat lebih mudah di
untuk dibaca baca
Memilih Jenis Font Untuk Website Anda

Saat memilih jenis font yang ingin anda pakai pada website anda, perlu dipahami bahwa
browser hanya menampilkan font yang telah terinstall dikomputer yang anda pakai. Hal ini
berakibat terhadap jumlah pilihan font yang terbatas. Ada beberapa teknik yang bisa
digunakan untuk mengatasi keterbatasan pemilihan jenis font tersebut.
Dimungkinkan juga untuk menentukan lebih dari satu jenis font dan membuat semacam
urutan pemilihan. Misalnya jenis font yang pertama tidak dikenali, maka akan memakai jenis
font berikutnya. Contoh penulisannya misalnya seperti berikut ini:
100
Font-family: georgia, Times, serif;
Terdapat beberapa cara untuk menggunakan fonts dalam web anda dengan tidak hanya
terbatas pada fonts yang telah terinstall dikomputer anda. Akan tetapi yang perlu
dipertimbangkan adalah tidak semua font gratis, sebagian ada yang harus anda beli lisensinya
Font-Family Font-Face Service-Based Font-Face
Font perlu terinstall terlebih CSS menentukan dimana lokasi Layanan komersial memberikan
dahulu pada komputer yang font dapat didownload apabila akses kepada pengguna ke koleksi
dipakai. CSS hanya berlaku untuk belum terinstall di komputer yang cukup banyak dengan
menentukan font yang akan menggunakan @font-face
dipakai
Kekurangan
Pilihan terbatas hanya pada font Pengguna harus mendownload file Ada biaya yang harus dikeluarkan
yang telah terinstall font, yang seringkali untuk membayar layanan font
memperlambat dalam memuat yang dipakai. Hal ini berkaitan
halaman web yang diakses dengan lisensi font
Lisensi
Anda tidak ikut mendistribusikan Lisensi dari font yang dipakai, Penyedia layanan yang akan
font yang anda gunakan, jadi harus mengizinkan mengurusi segala sesuatu terkait
tidak ada kekhawatiran terkait pendistribbusian dengan lisensi dari font yang anda
lisensi dari font yang anda pakai menggunakan @font-face gunakan
Pilihan Font
Pilihan font terbatas hanya pada Pilihan terbatas, karena tidak Setiap penyedia layanan
font yang telah terinstall banyak font yang disediakan secara memberikan pilihan font yang
gratis berbeda
Menentukan Jenis Font dengan Font-Family
Property font-family memungkinkan

anda untuk menentukan jenis font yang <style type="text/css">
body {
akan diterapkan pada elemen yang anda font-family: Georgia, Times, serif;}
tentukan.
h1, h2 {
font-family: Arial, Verdana,
Value dari property ini adalah tipe font sans-serif;}
.credits {
font-family: "Courier New", Courier,
monospace;}
</style>
yang ingin anda pakai.
Pengguna yang mengunjungi website

anda baru dapat menampilkan jenis font
yang anda tentukan apabila font tersebut
telah diinstall dikomputer pengguna
tersebut.
Anda bisa menentukan beberapa font
sekaligus yang dipisahkan dengan tanda
koma. Apabila jenis font yang pertama
tidak dikenali, maka akan digunakan Apabila nama font lebih dari dua suku kata,
jenis font berikutnya dari daftar font maka perlu dituliskan dalam dua tanda petik.
yang anda tuliskan.
Desainer menyarankan bahwa sebuah halaman

Seringkali daftar font yang dituliskan web akan nampak lebih baik apabila
diakhiri dengan jenis font yang umum, menggunakan jenis font tidak lebih dari tiga
misalnya serif. jenis dalam satu halaman.
Ukuran Font
Property font-size memungkinkan anda untuk menentukan ukuran dari font yang anda
gunakan. Terdapat beberapa cara dalam menentukan ukuran dari sebuah font. Yang paling
umum dipakai adalah:
• Pixels
Pixel seringkali dipakai karena memberi keluasan web desainer dalam menenentukan
secara tepat ruangan yang diperlukan untuk teks yang akan ditampilkan. Nilai dari
besarnya pixel diikuti huruf px
• Persentase
Ukuran default teks pada browser adalah 16px. Jadi sebuah font berukuran 75% sama
dengan 12px, dan 200% sama dengan 32px.
Apabila anda telah menentukan ukuran font pada elemen <body> dengan ukuran 75%
dari ukuran default (sehingga ukurannya 12px), dan kemudian anda menentukan lagi
ukuran pada elemen yang berada dalam elemen <body> dengan ukuran 75%, maka
ukuran fontnya akan menjadi 9px, yakni 75% dari 12px.
• EM
Sebuah em sama dengan lebar dari sebuah huruf m. Em memungkinkan anda untuk
merubah ukuran teks yang berhubungan dengan ukuran yg ada di parent element.
Pseudo Element dan Pseudo Class

Pada pengaturan teks, seringkali kita menggunakan pseudo element. Pseudo elemen ini
memiliki beberapa bentuk dan beberapa model pengaturan. Misalnya untuk mengatur agar
102
huruf pertama dari sebuah paragraf ukurannya jauh lebih besar dibandingkan yang lain.
Pseudo class yang akan sering kita temui adalah link.
Contoh Pseudo Element Cara ini memungkinkan anda untuk

mengatur ukuran yang berbeda untuk huruf
pertama atau baris pertama pada sebuah teks
p.intro:first-letter { dengan menggunakan :first-letter
font-size: 200%;} dan :first-line. Model ini seperti yang biasa
p.intro:first-line {
font-weight: bold;}
terlihat pada majalah atau surat kabar
dimana huruf pertama ukurannya jauh lebih
besar dibandingkan yang lain
Contoh Pseudo Class Browser secara default akan menampilkan
link dengan warna biru serta garis
dibawahnya, dan warna akan berubah
warnanya setelah link tersebut di klik untuk
memberi tahu pengguna link mana saja yang
telah dikunnjungi.
a:link {
color: deeppink; :link
text-decoration: none;}
a:visited { Mengatur tampilan link yang belum diklik
color: black;}
a:hover {
color: deeppink; :visited
text-decoration: underline;}
a:active { Mengatur tampilan link yang telah di klik
color: darkcyan;}
:hover
Untuk mengatur tampilan saat pointer
berada di atas link.
Background
Properti background digunakan untuk mendefinisikan efek background pada sebuah
element. Properti CSS untuk background antara lain:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
Digunakan untuk mengatur warna
div background pada sebuah element. Biasanya
{background-color:#b0c4de;} nilainya berupa hexadesimal, meskipun
tidak menutup kemungkinan untuk
menuliskan kode RGB atau nama warna.

Background Image
body { Background image untuk mengatur

background-image:url('paper. gambar sebagai background sebuah
gif'); element. Secara default, gambar yang
} digunakan sebagai background akan
ditampilkan berulangkali hingga
memenuhi area yang menampilkannya
url merupakan lokasi dimana file gambar tersebut berada.
Background Repeat
Background Repeat berfungsi untuk body

mengatur apakah gambar akan {
ditampilkan berungkali ke arah sumbu x background-image:url('gradient2.png')
;
atau sumbu y, atau gambar ditampilkan background-repeat:repeat-y;
sekali saja. Secara default, tampilan }
background berupa gambar akan
ditampilkan baik ke arah sumbu x
ataupun sumbu y. Adakalanya gambar body
hanya perlu ditampilkan berulangkali ke {
background-image:url('gradient2.png')
arah sumbu y atau sumbu x. ;
background-repeat:no-repeat;
}
Contoh kode berikutnya untuk mengatur
agar tampilan background berupa gambar
tidak diulangi atau hanya ditampilkan
sekali saja
Background Position
104
Property background-position digunakan
untuk menentukan titik awal lokasi dari
div
background. {
background-image:url('smiley.gif');
background-repeat:no-repeat;
Nilai dari property background position background-position:left top;
}
adalah berpatokan pada sumbu X dan Y.
Nilai pertama adalah lokasi berdasarkan
sumbu X dan nilai kedua dari sumbu Y.
Nilai yang bisa digunakan untuk border position antara lain

left top Apabila anda tidak menuliskan satu lokasi saja,
left center misalnya left, maka secara otomatis posisi lokasi kedua
left bottom adalah ditengah.
right top
right center
right bottom Contoh penggunaan:
center top
center center
background-position:left top;
center bottom
x% y% Nilai pertama adalah posisi horisontal dan nilai kedua

adalah vertical. Posisi 0% 0% berada di pojok kiri atas.
Pojok kanan bawah bernilai 100% 100%. Apabila anda
Contoh: menuliskan hanya satu nilai, maka nilai berikutnya
Background-position:25% 75%; secara otomatis 50%. Secara default bernilai 0% 0%
xpos ypos Deskripsinya sama dengan sebelumnya. Contoh:

Background-position: 20px 40px;
Langkah Kerja
2. Buat folder css dan images
3. Simpan semua file gambar yang diperlukan pada file images

HTML.
Percobaan
Percobaan 1 : Font Family
Percobaan 2: Font Size
106

Percobaan 3 : Text Transform
Percobaan 4: Text Decoration

Percobaan 5 : Text Shadow
Percobaan 6: Pseudo Element
108
Percobaan 7: Pseudo Class : style link
Percobaan 8 : Selector ID

Percobaan 9: Selector Class
Percobaan 10: CSS Background
110
Percobaan 11 : Background Image Repeat
Percobaan 12 : Background Image no repeat and position

112
Tugas
1. Buatlah sebuah halaman yang menggunakan pengaturan teks yang telah anda pelajari di
atas yang meliputi teks shadow, pengaturan style link dan lain-lain. Hasil outputnya
seperti di bawah ini. Didalamnya juga terdapat link. Judul nama PENS menggunakan text
shadow. Begitu juga tinggi tiap baris pada paragraph juga diatur.
2. Dengan menggunakan gambar sebagai background dan pengaturan format teks, buatlah
tampilan seperti di bawah ini

114
PRAKTIKUM 8
Boxes
Tujuan:
- Mahasiswa mampu menerapkan konsep padding
- Mahasiswa mampu menerapkan konsep margin
- Mahasiswa mampu memahami model border
- Mahasiswa mampu memahami konsep display
Dasar Teori
Pada Praktikum 1 telah dijelaskan bagaimana sebuah elemen diibaratkan berada disebuah
kotak yang mengelilinginya. Anda dapat mengatur tampilan dari kotak tersebut dengan
menggunakan beberapa property. Pada topik ini anda akan mempelajari tentang:
- Mengatur dimensi dari kotak yang mengelilingi elemen
- Membuat garis yang mengelilingi kotak
- Mengatur margin dan padding
- Menampilkan dan menyembunyikan kotak
Dimensi Kotak
Secara default sebuah kotak akan
memiliki ukuran yang cukup untuk <div>
<p>The Moog company pioneered the
menampung apapun yang ada didalamnya.
commercial
Anda juga bisa mengatur ukuran dari kotak manufacture of modular
yang berisi elemen atau isi lainnya dengan voltage-controlled
menggunakan property width dan height analog synthesizer systems in the
early
Cara paling popular untuk menentukan 1950s. </p>
ukuran dari sebuah kotak adalah dengan </div>
menggunakan pixel, persentase, atau
menggunakan em. Cara dengan
menggunakan pixel merupakan cara yang
div.box {
paling banyak dipakai oleh para desainer
height: 300px;
mengingat dengan cara ini desainer dapat width: 300px;
mengatur ukuran kotak secara akurat. background-color: #bbbbaa;}
p {
height: 75%;
Saat anda menggunakan persentase, maka ukuran kotak
width: tersebut akan sangat bergantung
75%;
pada besar kecilnya tampilan jendela browser anda. Apabila kotak tersebut
background-color: berada di kotak
#0088dd;}
lain, maka ia akan sangat berkaitan dengan besarnya ukuran dari kotak yang menampungnya.
Saat anda menggunakan em, ukuran dari kotak akan berdasarkan pada ukuran teks yang
ada di dalamnya. Desainer mulai menggunakan cara persentase dan em lebih banyak saat
mereka mencoba membuat sebuah desain yang fleksibel saat diakses melalui perangkat yang
beragam, yang memiliki ukuran layar yang beragam pula.

Pada contoh di atas, anda melihat sebuah kotak elemen <div> yang memiliki ukuran lebar
300 pixel dan tinggi 300 pixel. Didalamnya terdapat sebuah paragraph dengan ukuran 75%
untuk tinggi dan lebarnya. Artinya ukuran kotak paragraph tersebut adalah 225 x 225 pixel.
Membatasi Ukuran Kotak

Beberapa desain halaman mengembang dan mengecil untuk menyesuaikan dengan
ukuran layar pengguna. Pada desain tersebut, property min-width menentukan ukuran
terkecil dari sebuah kotak saat browser dikecilkan. Sedangkan property max-width
mengindikasikan ukuran lebar maksimum sebuah kotak saat kotak tersebut mengembang
menyesuaikan ukuran window browser yang diperbesar.
Property-property tersebut sangat membantu untuk memastikan isi dari sebuah halaman
gampang dibaca, khususnya pada perangkat mobile. Misalnya anda bisa menggunakan
property max-width untuk memastikan bahwa ukuran sebuah baris teks tidak nampak terlalu
lebar didalam sebuah jendela browser yang besar dan anda menggunakan min-width agar
jendela layar tidak terlalu kecil..
Anda bisa mencoba contoh disamping untuk mengetahui efek yang terjadi saat anda
menambah atau mengurangi ukuran jendela browser.
Property ini mulai di dukung oleh IE7 dan Firefox 2. Jadi property ini tidak akan berjalan
sebagai mana mestinya saat ditampilkan pada browser versi2 di bawahnya.
Untuk membatasi ukuran tinggi dari kotak, anda bisa menggunakan property min-height
atau max-height. Adakalanya isi dari sebuah kotak melebihi tinggi yang kita tentukan,
tentunya apabila hal ini terjadi, maka halaman akan ditampilkan secara tidak teratur. Untuk
mengatasi hal ini, anda bisa menggunakan overflow yang akan dibahas secara detail pada bab
ini.
Overflow
Property overflow akan memberitahukan ke browser tentang apa yang harus dilakukan
saat isi yang berada di dalam kotak melebihi ukuran dari kotak yang menampungnya.
Property ini bisa memiliki salah satu dari dua value:
- Hidden
Property ini akan menyembunyikan isi yang melebihi batas dari kotak yang
menampungnya.
- Scroll
Property ini akan menambahkan scrollbar ke dalam kotak, sehingga pengguna dapat
menggulung layar untuk melihat isi yang tidak nampak.
Border, Margin dan Padding

Setiap kotak memiliki tiga property yang bisa kita rubah untuk mengatur tampilannya
116
Border Margin Padding
Setiap kotak memiliki Margin berada di tiap ujung Padding merupakan ruang
sebuah garis tepi, meskipun dari garis tepi. Anda bisa antara garis tepi kotak
tidak nampak atau diatur mengatur lebar margin untuk dengan isi yang ada
dengan ketebalan 0 pixel. membuat sebuah jarak antara didalamnya. Dengan
Sebuah garis tepi garis tepi sebuah kotak menambahkan padding,
memisahkan antara satu dengan kotak yang berada di akan sangat membantu
kotak dengan kotak lainnya dekatnya dalam kemudahan membaca
isi yang ada di dalam kotak.
Saat anda menentukan lebar sebuah

kotak, maka border,margin, dan
padding akan ditambahkan dengan
lebar dan tingginya
White Space & Vertical Margin
Dengan Margin & Tanpa

Padding
Margin & Padding Padding dan

margin sangat
membantu dalam
menambah ruang
antar item dalam
satu halaman
Langkah Kerja
118
HTML.
Percobaan
Percobaan 1: Mengatur Width dan Height
Percobaan 2: Membatasi Ukuran Minimal Dengan Min-width dan Max-width

120
Percobaan 3: Membatasi Ukuran Minimal Dengan Min-height dan Max-height

Percobaan 4: Menerapkan Overflow
Percobaan 5: Ukuran Lebar Garis Tepi
122
Percobaan 6: Menerapkan Border Style
Percobaan 7: Menerapkan Warna Pada Garis Tepi

Percobaan 8: Padding
Percobaan 9: Margin
Percobaan 10: Mengatur Posisi Content
124
Percobaan 11: Mengatur Display

Percobaan 12: Garis Tepi Berupa Gambar
Percobaan 13: Mengatur Border Radius
Percobaan 14: Box Shadow
126
Percobaan 15: Bentuk Elips

Tugas
1. Buatlah icon berikut ini dengan menggunakan gambar png transparan dan menggunakan
CSS untuk memanipulasi backgroundnya
Besar dan kecil
Background bulat
Round corner background
Round corner dengan teks
Lingkaran dengan teks
Gradient dan lingkaran
2. Gambar yang sebenarnya berbentuk kotak, ditampilkan dalam bentuk round corner atau
lingkaran. Misalnya seperti di bawah ini:
Gambar asli Output Output
128
130
PRAKTIKUM 9
LIST, TABLE DAN FORM
Tujuan
- Mahasiswa mampu memahami pengaturaan style pada list
- Mahasiswa mampu memahami pengaturan style pada tabel
- Mahasiswa mampu memahami pengaturan style pada form
Dasar Teori
CSS menyediakan beberapa properties yang dapat dipakai untuk mengatur tampilan
elemen-elemen khusus pada HTML seperti list, table, dan form. Pada topik ini anda akan
mempelajari tentang:
- Menentukan tipe bullet yang digunakan pada list
- Menambahkan border dan background pada cell tabel
- Mengontrol tampilan dari form
List
Untuk mengatur tampilan list, CSS menyediakan beberapa property yang bisa kita
gunakan, misalnya mengatur jenis bullet yang digunakan, mengatur tampilan masing-masing
item pada list dan beberapa property lainnya.
a. Mengatur jenis bullet
Untuk mengatur jenis bullet yang akan dipakai pada list, kita bisa menggunakan
list-style-type. Dengan property ini kita bisa mengatur bentuk dari list yang ingin kita
tampilkan. Property ini bisa kita gunakan untuk mengatur tampilan yang akan di terapkan
pada <ol>, <ul>, dan <li>.
Penggunaan pada list yang tidak berurutan atau <ol> dapat memilih salah satu value dari
beberapa value yang disediakan yakni none, disc, circle, dan square.
Berbeda dengan penggunaan pada list yang berurutan, pada list jenis ini beberapa pilihan
nomor disediakan seperti:
- decimal : menampilkan bilangan desimal
- decimal-leading-zero: desimal yang di awali nol, misalnya 01 02 03 dst
- lower-alpha : menampilkan huruf kecil pada urutan list, misalnya a b c dst
- upper-alpha: menampilkan huruf besar pada urutan list, misalnya A B C dst
- lower roman : list berupa huruf romawi kecil, seperti i, ii, iii
- upper-roman: list berupa huruf romawi besar seperti I II III
b. Mengatur Gambar Sabagai Bullet
Anda bisa menentukan sebuah gambar untuk menjadi bullet pada list yang anda buat
dengan menggunakan property list-style-image.
Value pada property ini berupa alamat lokasi gambar tersebut disimpan. Property ini

hanya berlaku pada <ul> dan <li>.
Anda juga bisa mengatur margin pada tiap item untuk mengatur jarak antara satu item
dengan yang lain.
c. Mengatur posisi bullet
Biasanya list secara default akan ditampilkan menjorok kedalam dari isi utama sebuah
halaman. Property list-style-position akan mengatur apakah tanda tiap list atau bullet
akan ditampilkan didalam atau diluar kotak yang berisi isi utama dari sebuah halaman.
Saat tampilannya ditentukan outsidee, maka tanda dari list akan berada pada posisi kiri
dari sebuah blok teks. Tampilan ini juga tampilan yang secara default akan ditampilkan
apabila anda tidak menentukan posisi tampilan.
Saat tampilannya ditentukan inside, maka penanda tiap list akan ditampilkan didalam
kotak teks.
Tabel
Beberapa property yang bisa digunakan untuk mengatur tampilan sebuah tabel telah anda
pelajari pada topik-topik sebelumnya seperti:
- width
- padding
- text-transform
- letter-spacing
- font-size
- border
- text-align
- background-color
- :hover
Beberapa tips yang bisa anda terapkan saat mendesain sebuah tampilan tabel adalah:
- Memberikan jarak antara isi dengan garis tepi cell yakni dengan menggunakan
padding
- Memperjelas tampilan header tabel
- Memberikan tampilan background baris yang berbeda. Misal untuk baris genap
berwarna putih dan baris ganjil berwarna abu-abu. Hal ini akan memudahkan dalam
membaca tampilan informasi yang ada didalamnya
- Mengurutkan tampilan nomor
Salah satu yang perlu menjadi perhatian saat kita berurusan dengan tabel HTML adalah
tentang cell yang kosong. Apabila anda memiliki cell yang kosong pada HTML, anda bisa
menggunakan property empty-cell.
Browser memiliki cara berbeda-beda dalam memperlakukan sebuah cell kosong pada
tabel. Ada kalanya sebuah browser tidak menampilkan garis dari cell saat ada sebuah cell
yang kosong. Untuk memastikan apakah sebuah cell yang kosong garisnya ditampilkan atau
tidak, anda bisa menggunakan property empty-cell yang menyediakan 3 pilihan value,
diantaranya:
132
- show
akan menampilkan garis apabila ada cell yang kosong
- hide
akan menyembunyikan garis apabila ada cell yang kosong
- inherit
apabila anda memiliki tabel dalam tabel, value ini akan memerintahkan cell tabel
untuk mematuhi aturan yang telah ditentukan pada tabel utama
Mengatur Jarak tiap Cell

Untuk mengatur jarak tiap cell, anda bisa menggunakan property border-spacing dan
border-collapse.
Property border-spacing akan mengatur jarak antar cell. Secara default, browser akan
memberikan sedikit jarak pada tiap cell, anda bisa mengurangi atan menambah besarnya jarak
ini dengan menggunakan property border-spacing. Value dari property ini bisa berisi satu nilai
dalam pixel atau dua nilai untuk mengatur jarak vertikal dan horisontal.
Saat sebuah cell menampilkan garis tepi yang mengelilinginya, kemudian berdempetan
dengan cell yang lain, maka ukuran garis tepi akan menjadi dua kali lipat. Hal ini bisa anda
cegah dengan menggunakan property border-collapse.
Value yang bisa anda gunakan adalah:
- collapse
garis tepi akan digabungkan menjadi satu dengan ukuran garis tepi tetap sama. Misal
anda menentukan garis sebesar 2 pixel. Maka saat sebuah garis tepi cell bertemu
dengan garis tepi cell yang lain, maka garis tepinya tetap berukuran 2 pixel.
- Separate
Border akan dipisahkan satu sama lain dan border-spacing dan empty-cell tetap akan
dipatuhi
Form
CSS biasanya digunakan untuk mengatur tampilkan pada elemen-elemen form. Hal ini
bertujuan untuk mempercantik tampilan form dan juga untuk memastikan bahwa tampilannya
tetap sama pada berbagai macam browser.
Elemen pada form yang biasa diatur tampilannya adalah:
- Text input dan text area
- Submit button
- Label pada form
Mengatur tampilan teks input dan submit button relatif lebih mudah, akan tetapi saat
mengatur select box, radio button, dan check box agar konsisten pada tiap browser relatif
lebih sulit. Anda bisa menggunakan beberapa solusi yang menggunakan javascript untuk
mengatur agar tampilan sama pada tiap browser.

Gambar. Tampilan form dalam beberapa browser
Berikut ini beberapa pengaturan yang bisa anda lakukan pada form
1. Pengaturan pada text input
Pengaturan pada text input bisa anda lakukan dengan menuliskan elemen input
sebagai selector. Selanjutnya anda bisa menggunakan beberapa property yang telah
anda pelajari sebelumnya seperti pengaturan ukuran font, pengaturan garis tepi,
pengaturan background, pengaturan warna tulisan dan pengaturan-pengaturan lainnya.
Saat pengguna meletakkan kursor pada text input, dan kemudian anda ingin
mendeteksinya yang selanjutnya anda ingin merubah tampilan saat hal tersebut terjadi.
Untuk memenuhi kebutuhan ini, anda bisa menggunakan pseudo class :focus. Pseduo
class lainnya seperti :hover juga bisa anda terapkan pada text input ini.
2. Pengaturan pada Button
Beberapa pengaturan yang bisa anda lakukan pada sebuah button antara lain adalah
mengatur background button, warna tulisan, dan beberapa pengaturan umum lainnya.
Anda juga menerapkan pseudo class :hover pada sebuah button, sehingga pada saat
kursor berada di atas sebuah button, maka button akan bereaksi dengan merubah
tampilannya.
3. Pengaturan pada fieldset dan legend
Fieldset dan Legend merupakan elemen yang sangat membantu pada sebuah form.
Keberadaan keduanya akan memberikan informasi tambahan terkait dengan form.
Fieldset berfungsi untuk menandai area tepian atau batas sebuah form, sedangkan
legend memberikan informasi tentang form tersebut.
Pengaturan-pengaturan yang sering dipakai pada fieldset dan legend misalnya seperti
pengaturan lebarnya, warna tulisan, garis tepi, dan border radius. Padding juga sering
134
digunakan untuk memberikan ruang tambahan.
4. Pengaturan pada label
Label pada form sering kali memiliki panjang yang berbeda, hal ini karena informasi
yang diberikan terkait input pada form berbeda-beda. Hal ini mengakibatkan tampilan
form kurang menarik, karena elemen ditampilkan tidak lurus.
Untuk mengatasi hal ini, anda bisa menggunakan float(akan dibahas lebih detail pada
bab berikutnya), kemudian memberikan ukuran lebar yang sama pada tiap label.
Pengaturan selanjutnya adalah align, apakah dibuat rata kanan, atau kiri.
5. Pengaturan pada kursor
Property cursor berfungsi untuk mengatur tampilan kursor dari pengguna. Property ini
dapat dipakai saat pengguna hendak melakukan klik pada sebuah button, maka saat
kursornya berada di atas button tersebut, akan berubah menjadi bentuk tangan,
Alat dan Bahan

- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau
yang lainnya
- Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai icon
pada list
Cara Kerja
8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.

Percobaan
Percobaan 1 : Mengatur Tampilan Tipe List
Percobaan 2 : Image Sebagai Bullet Pada List
136
Percobaan 3 : Mengatur Posisi Item List
Percobaan 4 : Penulisan Singkat Dari List Style

Percobaan 5 : Property Tabel
138
Percobaan 6 : Mengatur Cell Kosong
Percobaan 7 : Jarak Antar Cell
Percobaan 8 : Mengatur Tampilan Teks Input

Percobaan 9 : Mengatur Tampilan Tombol Submit
Percobaan 10 : Mengatur Tampilan Fieldset dan Legend
140
Percobaan 11: Menata Tampilan Elemen Form
Percobaan 12: Mengatur Tampilan Kursor
142
Tugas
Buatlah tabel dan form seperti di bawah ini. Hasil diupload pada sub domain
masing-masing mahasiswa didalam folder “praktikum9”.
1. Form
2. Table

144
PRAKTIKUM 10
LAYOUT
Tujuan
- Mahasiswa mampu memahami pengaturan posisi dari elemen
- Mahasiswa mampu memahami cara pembuatan layout
- Mahasiswa mampu memahami dasar desain layout untuk berbagai
Dasar Teori
Pada bagian ini akan kita pelajari tentang pengaturan letak elemen pada sebuah
halaman web serta cara untuk membuat layout yang menarik. Pengaturan tata letak elemen
ini akan menggunakan beberapa cara yang berbeda misalnya normal flow, relative, absolute
dan float. Selain itu pada bagian ini anda juga akan berkenalan dengan dasar pembuatan
desain layout untuk berbagai ukuran layar.

Box Model
Sebelum membuat sebuah layout yang terdiri banyak kolom, perlu dipahami terlebih
dulu tentang box model. Setiap elemen pada halaman sebuah web, dikelilingin oleh sebuah
area yang terdiri dari kotak-kotak berlapis yang bisa dimanipulasi untuk menghasilkan
tampilan yang menarik.

Gambar 10.1 Box model. Pada bagian tengah merupakan bagian isi, kemudian yang
mengelilinginya adalah padding, selanjutnya border mengelilingi padding dan kemudia
border dikelilingin oleh margin

Gambar 10.2 Box model diterapkan pada semua elemen yang ditampilkan dalam halaman
web, misalnya paragraph

Gambar 10.3. Box model pada list

CSS memperlakukan setiap elemen HTML seolah-olah berada pada kotak-kotak yang
terpisah. Kotak-kotak tersebut bisa berupa block-level box atau inline box.
Kotak block-level selalu memulai baris baru dan berperan sebagai blok utama pada
sebuah layout, sedangkan inline box tidak membuat bari baru melainkan akan mengelilingi
teks. Anda bisa mengatur besar ruang kotak pada tiap elemen dengan mengatur tinggi dan
lebar dari kotak tersebut. Anda membedakan antara kotak satu dengan yang lainnya, anda
bisa mengatur margin, border, padding dan background dari kotak-kotak tersebut.

146

Gambar 10.4. Contoh tampilan elemen block-level, misalnyanya <h1>,<p>, <ul>,<li>.

Gambar 10.5. Contoh tampilan elemen inline, misalnya <img>, <b>, <i>

Apabila sebuah elemen block-level berada didalam elemen block-level lainnya, maka
elemen block-level terluar biasa disebut dengan elemen parent.Seringkali seorang web
desainer mengelompokkan sejumlah elemen didalam sebuah elemen <div> atau elemen
yang lainnya. Misalnya mengumpulkan sejumlah elemen yang membentuk header dari
sebuah web yang berisi logo, navigasi utama atau yang lainnya.


Gambar 10.6. Contoh sebuah tampilan dimana sebuah box berisi beberapa elemen
block-level.

Pada gambar di atas, garis berwarna oranye mewakili elemen <div>. Header yang berisi
logo dan navigasi berada di dalam satu elemen <div>. Sedangkan pada bagian utama atau
main berada di dalam elemen yang lain. Elemen yang ketiga menampung footer. Elemen
body merupakan elemen yang menampung ketiga elemen utama tersebut.

Mengatur Posisi Elemen
CSS memiliki beberapa pilihan untuk mengatur posisi elemen pada layout sebuah
halaman, yakni normal flow, relative positioning, dan absolut. Untuk menentukan posisi
sebuah elemen, bisa menggunakan property position.

Normal flow Relative Absolut
Setiap elemen block-level selalu Pengaturan posisi ini akan Pengaturan posisi ini akan
muncul dalam baris baru, hal ini menggeser elemen dari posisi menempatkan elemen berkaitan
menyebabkan setiap item selalu defaultnya. Pergeseran bisa ke arah dengan elemen yang
muncul di bawah item atas, bawah, kanan, atau kiri dari menaunginya atau elemen
sebelumnya. Walaupun anda posisi seharusnya. Pergeseran ini parentnya. Pengaturan posisi ini
mengatur lebarnya dan tidak akan merubah posisi elemen sudah tidak mengikuti normal
sebenarnya ada ruang untuk disekitarnya, elemen - elemen flow lagi yang juga berarti tidak
saling berdampingan, maka tetap tersebut tetap akan berada pada akan berefek pada posisi
tidak akan tampil seperti itu. Ini normal flow. elemen-elemen disekitarnya.
merupakan posisi secara default Posisi absolut akan berubah saat

pada browser, kecuali anda pengguna menggulung layarnya
menentukan yang lain. melalui scroll.

148

Paragraph ditampilkan berurut Paragraph kedua digeser kekanan Bagian heading diposisikan pada
secara vertikal dan ke bawah dari posisi pojok kanan atas dan paragraph
seharusnya saat normal flow tetap akan ditamplkan pada pojok
kiri dari layar anda.

Untuk menentukan dimana posisi sebuah elemen, anda bisa menggunakan property box
offset untuk memberitahukan browser sejauh mana anda menempatkan elemen dari
sebelah kiri, atas, kanan atau kiri.

Fixed Position Float
Pengaturan posisi ini sebenarnya Dengan mengatur posisi elemen pada
merupakan bentuk lain dari posisi float, maka seolah-olah anda
pengaturan absoulut, yang mengeluarkan elemen tersebut dari
membedakan adalah posisi ini normal flow dan menempatkannya ke
mengacu pada browser. Elemen yang area sebelah kanan atau kiri. Elemen
posisinya diatur dengan menggunakan dengan posisi float akan menjadi
fixed, tidak akan mempengaruhi sebuah block-level tersendiri dengan
elemen disekitarnya. Posisinya akan elemen-elemen lain yang
tetap disitu meskipun pengguna mengitarinya
menggulung layar ke bawah atau
keatas.
Saat merubah posisi

elemen dari normal
flow, maka
elemen-elemen
tersebut akan saling
bertumpukan. Dengan
menggunakan property
z-index, anda bisa
mengatur elemen mana
yang berada paling
atas.
Pada gambar diatas, heading Pada gambar diatas, elemen
ditempatkan pada bagian tengah ditempatkan pada posisi float ke kiri
halaman dengan pengaturan jarak yang akhirnya akan berefek pada
25% dari atas layar. elemen disekitarnya yakni berupa
paragraph yang mengelilingi blok
tersebut

Posisi Normal
Pengaturan posisi ini akan menempatkan setiap block-level elemen secara berurutan
dari atas ke bawah. Block-level elemen yang dituliskan pertama kali akan muncul di bagian
atas dan diikuti oleh block-level elemen yang lain. Pengaturan ini merupakan posisi default
dari block-level elemen sehingga tidak perlu dituliskan pada CSS. Akan tetapi apabila anda
ingin menuliskannya, maka penulisannya seperti berikut ini:
Position:static;
Apabila tidak diatur lebar dari block-level elemen pada CSS, maka ukurannya akan sesuai
dengan ukuran lebar dari jendela browser.

Posisi Relative
Pengaturan posisi relativ akan menempatkan block-level elemen ke arah kanan, kiri, atas,
atau bawah dari posisi seharusnya yang mengacu pada posisi normal. Misalnya sebuah
elemen paragraph seharusnya berada tepat di bawah paragraph sebelumnya, akan tetapi
anda bisa merubah posisinya dengan menggunakan position relativ, misalnya digeser masuk
sebelah kanan sebesar 50 pixel.
Penulisan posisi ini sebagai berikut
position:relative;
top:10px;
left:100px;
Setelah menentukan posisinya relative, maka anda perlu menuliskan ke arah mana dan
berapa besar nilainya. Seperti contoh di atas, maka elemen akan bergeser 10 pixel dari
elemen di atasnya dan bergeser ke arah kanan sebesar 100 pixel. Untuk arah yang lain anda
bisa menuliskannya dengan cara yang serupa. Akan tetapi penulisan

Posisi Fixed
Posisi ini akan mengatur elemen pada posisi yang tetap meskipun browser digulung ke
bawah atau ke atas. Posisi yang tetap ini berpatokan pada browser, misalnya anda mengatur
posisi sebuah elemen pada jarak dari atas 20 pixel dan jarak dari kiri 20 pixel, maka pada saat
anda menggulung layar browser anda ke bawah, elemen tersebut akan tetap berada pada
posisi semula.
Contoh penulisannya seperti berikut ini:

h1{
position: fixed;
top: 0px;
left:50px;}

Pada contoh di atas, elemen header diposisikan pada jarak 0 pixel dari tepian atas
150
browser dan 50 pixel dari tepian kiri browser.

Posisi Absolut
Pada saat sebuah elemen diatur pada posisi absolut, maka elemen tersebut sudah tidak
lagi mengikuti aturan normal flow yang seharusnya dan tidak akan mempengaruhi elemen
sekitarnya. Pengaturan offset (kanan atau kiri dan atas atau bawah) akan menentukan jarak
elemen tersebut dengan elemen yang menampungnya. Misalnya sebuah elemen header
yang berada pada sebuah body.
Contoh penulisannya sebagai berikut:
h1{
position:absolute;
top:0px;
left:500px;
width:450px;}
Pada contoh tersebut elemen header akan diposisikan pada tepi sebelah kanan browser
dengan jarak ke kiri sebesar 500 pixel.
Alat dan Bahan

yang lainnya
pada list
Cara Kerja
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
yang ada pada praktikum ini
8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.

Percobaan
Percobaan 1: Normal Flow

Percobaan 2: Posisi Relative
152
Percobaan 3: Posisi Absolute

154
Percobaan 4: Posisi Fixed
Pada percobaan ini, silahkan anda perkecil ukuran browser hingga muncul scroll bar pada sisi
kanan browser. Kemudian scroll ke bawah dan lihat posisi header apakah berubah atau tidak

Percobaan 5: z-index
Pada percobaan ini, kecilkan ukuran layar hingga muncul scroll bar disamping kanan browser
anda, kemudian gulung ke atas dan perhatikan bagian isi dan header.
Selanjutnya, pada bagian CSS, hilangkan z-index dan jalankan pada browser dan lihat
perbedaannya. Lakukan analisa dari hasil percobaan ini.
156
Percobaan 6 : Posisi Float

Percobaan 7 : Menggunakan Posisi Float
158
Percobaan 8 : Menggunakan Clear
Pada praktikum ini, tampilkan hasil outputnya pada browser. Selanjutnya hilangkan kode
clear pada CSS dan tampilkan hasilnya pada browser. Perhatikan perbedaannya

Percobaan 9 : Permasalahan Pada Float
Pada percobaan ini, perhatikan border yang dihasilkan
160
Percobaan 10: Solusi Permasalahan Pada Float
Perhatikan perbedaan output yang dihasilkan dibandingkan sebelumnya

Percobaan 11: Membuat Dua Kolom
162
Tugas
1. Buatlah sebuah layout dengan tampilan tiga kolom seperti tampilan format di bawah ini:
2. Buatlah tampilan sebuah layout seperti di bawah ini. Isi halaman bebas.

164

PRAKTIKUM 11
Desain Layout Dengan Grid
Tujuan
- Mahasiswa mampu memahami beragam ukuran layar
- Mahasiswa mampu memahami beragam solusi layout
Dasar Teori
Saat membahas tentang layout web, maka secara otomatis kita akan dibawa ke beberapa
konsep dasar yang perlu dipahami, salah satunya adalah tentang ukuran layar monitor yang
digunakan oleh pengunjung website yang kita buat. Saat ini beragam peralatan dipergunakan
untuk mengakses website mulai dari ukuran layar tersebesar seperti PC atau komputer,
kemudian disusul laptop hingga menggunakan perangkat mobile seperti smartphone hingga
HP biasa.
Desain layout web memiliki beberapa jenis yang mempengaruhi ukuran layout saat
ditampilkan pada browser. Dua hal ini yang menjadi pembahasan utama pada praktikum ini.
Ukuran Layar
Pengguna internet menggunakan berbagai media untuk mengunjungi website anda.
Media-media yang beragam ini juga memiliki ukuran layar yang baragam pula. Misalnya
media yang mereka pakai mulai dari komputer, laptop, tablet, hingga smartphone, dimana
masing-masing media tersebut memiliki resolusi layar yang berbeda. Ukuran layar ini akan
sangat mempengaruhi tampilan web dan juga banyaknya informasi yang bisa ditampilkan
oleh pengguna.
Sebagai seorang desainer, anda harus memastikan bahwa desain web yang anda buat
dapat ditampilkan pada ukuran layar yang berbeda-beda.
Gambar 11.1 Beragam ukuran resolusi layar

Saat kita mendesain untuk kebutuhan percetakan, kita tahu persis ukuran kertas yang
akan menjadi media cetak dari desain kita. Berbeda saat kita mendesain untuk web, kita tidak
akan pernah tahu berapa ukuran layar yang akan digunakan oleh pengunjung website kita.
Saat ini ukuran layar cukup beragam, seperti nampak pada Gambar 11.1. Dari ukuran tersebut,
kita bisa melihat bahwa akan ada kemungkinan pengunnjung website kita akan menggunakan
layar berukuran 9 inch dan bisa pula dengan ukuran yang jauh lebih besar yakni 27 inch.
Besarnya ukuran layar yang digunakan, akan mempengaruhi ukuran window browser
yang tentunya juga akan mempengaruhi ukuran halaman yang bisa ditampilkan.
Resolusi Layar
Resolusi layar sebenarnya mengacu pada jumlah titik per inch yang muncul pada layar.
Beberapa perangkat memiliki resolusi yang lebih tinggi apabila dibandingkan dengan
komputer desktop dan biasanya sebagian besar sistem operasi mengijinkan kita untuk
mengatur besarnya resolusi layar.
Gambar 11.2 Contoh resolusi layar dari dua perangkat yang berbeda
Ukuran resolusi layar dapat dirubah melalui pengaturan yang ada pada sistem operasi
didalamnya. Salah satu hal yang perlu diingat bahwa semakin besar resolusi layar, maka
tulisan akan semakin kecil. Saat ini terdapat banyak sekali perangkat mobile yang memiliki
resolusi yang lebih tinggi dibandingkan perangkat desktop.
Ukuran Halaman
Karena ukuran layar dan resolusi yang beragam, maka desainer web sering membuat
halaman web dengan rentang ukuran mulai 960 pixel hingga 1000 pixel. Dengan ukuran ini
maka sebagian besar pengguna akan dapat melihat tampilan desain web pada layar mereka.
Menentukan ukuran tinggi dari browser pada layar yang digunakan untuk menampilkan
web jauh lebih sulit lagi. Dalam rentang waktu beberapa tahun, desainer mengasumsikan
bahwa pengguna akan menampilkan pada ukuran 570-600 pixel tanpa harus menggulung
layarnya. Hal ini juga menjadi pedoman untuk menempatkan informasi-informasi penting
pada area tersebut karena ditakutkan pengguna tidak mau melakukan scroll ke bagian bawah
layar.
166
Seiring dengan bertambahnya ukuran layar dan perangkat mobile semakin populer, maka
area yang bisa digunakan untuk menampilkan web semakin beragam.
Area yang dilihat oleh pengguna pada browser tanpa melakukan scroll kebawah biasa
diistilahkan dengan “above the fold”. Istilah ini mengacu pada tampilan halaman depan koran
saat dilipat setengah.
Saat ini jamak diketahui bahwa bagi para pengguna yang tertarik dengan isi halaman
sebuah web, maka besar kemungkinan mereka akan menggulung layarnya ke bawah untuk
melihat lebih banyak informasi yang bisa dilihat. Berdasarkan hasil penelitian tentang
usability, telah menunjukkan bahwa seorang pengunjung web bisa menilai sebuah halaman
hanya dalam waktu beberapa detik saja sehingga penting untuk tetap memberitahu
pengunjung baru bahwa situs tersebut relefan dan sesuai dengan apa yang mereka inginkan.
Kesimpulannya, banyak desain web menaruh informasi penting pada rentang ukuran
tinggi antara 570 – 600 pixel untuk memberitahukan isi utama dari website tersebut. Saat
penulisan modul ini, sedang muncul trend tentang konsep responsive design yang mampu
menyesuaikan tampilan halaman dengan ukuran layar browser.
Gambar 12.3 Contoh tampilan halaman flickr.com. bagian yang terang merupakan bagian
yang muncul saat pengguna tidak menggulung layarnya kebawah
Pengaturan Ukuran Layout

Pengaturan ukuran lebar layout setidaknya ada dua cara yakni dengan menuliskan ukuran
lebar secara fix dengan satuan pixel dan cara yang kedua adalah dengan menggunakan
persentase dari lebar layar browser yang digunakan.
a. Fixed Width Layout

Lebar layout ditentukan secara fix dengan satuan pixel. Sehingga saat pengguna

mengurangi atau memperbesar ukuran browser, maka lebar dari layout web tidak akan
berubah.
Gambar 12.4 Contoh rancangan layout dengan lebar yang fix
Gambar di atas menunjukkan rancangan web dengan ukuran lebar yang fix, mulai dari
komponen yang ada didalamnya dengan ukuran 520, 200, dan 200 pixel. Sedangkan
ukuran 960 merupakan ukuran standart yang banyak dipakai karena diasumsikan
pengunjung banyak menggunakan ukuran layar 1024 x 768.
Berikut ini kelebihan dan kekurangan saat memutuskan untuk menggunakan fixed width
layout.
Kelebihan Kekurangan
- Satuan pixel sangat akurat untuk - Bisa jadi akan muncul ruang
mengatur ukuran dan posisi dari kosong yang lebar pada bagian
elemen kanan kiri layout
- Desainer memiliki kontrol yang - Apabila resolusi dari layar
lebih besar terhadap ukuran dan pengguna terlalu tinggi, maka
posisi elemen apabila dibandingkan tampilan akan nampak lebih kecil
dengan liquid layout dan teksnya sulit dibaca
- Anda bisa mengatur panjang garis - Apabila pengguna memperbesar
atau ukuran teks tanpa ukuran teks, bisa jadi area yang
memperdulikan ukuran window menampungnya tidak cukup
pengguna - Desain ini akan cocok pada ukuran
- Ukuran dari gambar akan tetap layar yang ada pada dekstop atau
sama pada semua halaman laptop
b. Liquid Layout
Pada liquid layout, ukuran layout dalam satuan persen. Satuan persen ini mengacu pada
ukuran browser yang digunakan. Lebar layout akan menyesuaikan secara otomatis
dengan ukuran layar browser. Saat anda mengurangi atau memperbesar ukuran layar
browser, maka ukuran layout akan mengikuti secara otomatis.
168
Gambar 11.5. Contoh rancangan liquid layout
Berikut ini beberapa kelebihan dan kekurangan dari liquid layout
Kelebihan Kekurangan
- Halaman akan menyesuaikan ukuran - Apabila anda tidak mengatur lebar dari
layar, sehingga tidak ada ruang kosong layout, maka resikonya akan muncul
di sekitar area layout pada layar dengan jarak pada tiap elemen dan tampilan
resolusi tinggi terlihat aneh
- Apabila pengguna memiliki tampilan - Apabila pengguna memiliki tampilan
layar yang kecil, layout akan mampu window yang lebar, maka teks akan
menyesuaikan, pengguna tidak perlu ditampilkan memanjang yang akan
menggeser ke kanan-kekiri atau ke menyusahkan untuk dibaca
bawah – ke atas. - Apabila tampilan window terlalu kecil,
- Saat pengguna memperbesar tampilan maka teks akan sulit dibaca, dan hanya
font, layout tetap mampu akan muncul beberapa kata dalam satu
menyesuaikan baris
Anda bisa mengontrol lebar dari elemen dengan cara menggunakan nilai minimum dan
maksimum width yang merupakan salah satu properti CSS, yakni min-width dan max-width
Grid Pada Layout

Komposisi dari sebuah karya visual(desain, lukisan, fotography) adalah penempatan atau
penyusunan dari elemen visual, yakni pengaturan elemen-elemen tersebut. Grid banyak
digunakan untuk membantu dalam menata tiap elemen karya visual, dalam hal ini web juga
termasuk di dalamnya.
Grid memiliki proporsi dan jarak antar item yang konsisten dan pada akhirnya akan
membantu dalam membuat website yang nampak profesional. Selain itu grid juga akan
membantu memunculkan continuity antar halaman web yang mungkin menggunakan desain
yang berbeda.
Berikut ini contoh penggunaan grid:

Gambar 11.6. Contoh penggunaan grid
Pada gambar tersebut dapat kita lihat bagaimana grid membantu dalam menentukan posisi
dari tiap elemen. Secara tidak langsung elemen yang disusun sedemikian rupa juga akan
membentuk sebuah garis lurus yang jelas kita lihat. Hal ini juga akan sangat membantu
memudahkan pengguna dalam membaca isi halaman web tersebut.
Anda bisa mendapatkan template grid untuk membantu anda dalam mendesain. Salah satu
standart yang banyak dipakai adalah ukuran 960 pixel. Anda bisa mendownload template grid
di www.960.gs dalam berbagai format, mulai dari pdf, Adobe Illustrator, Adobe Photoshop,
Corel Draw dan lain-lainnya.
Dengan menggunakan ukuran 960 pixel, anda bisa membuat beberapa rancangan layout
misalnya seperti berikut ini:
170
Gambar 11.7. Contoh rancangan layout pada ukuran 960 pixel
Pada contoh rancangan Gambar 11.7 terdapat 12 kolom grid dengan lebar masing-masing 60
pixel. Setiap kolom memiliki margin 10 pixel sehingga saat dua kolom sejajar, akan muncul
jarak 20 pixel dan jarak 10 pixel untuk tepian kanan dan kiri halaman. Contoh yang lainnya
seperti berikut ini.
Gambar 11.8. Contoh lain rancangan layput pada ukuran 960 pixels

Melalui template grid, anda bisa mengembangkan rancangan lain dari sebuah layout.
Misalnya rancangan berikut ini untuk praktikum 11.
Gambar 11.9 Contoh rancangan dengan lebar 960 pixel
Alat dan Bahan

yang lainnya
pada list
172
Cara Kerja
6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai
nomor percobaan dengan ekstensi .html
7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada
“Save as Type” menjadi “All Files”. Apabila anda menggunakan notepad++, pada
pilihan tipe file, pilih yang bertipe HTML

Percobaan
Percobaan 1: Fixed Layout
Pada percobaan ini, silahkan anda perkecil dan perbesar ukuran browser dan perhatikan
perubahan pada layout.
Kode HTML
Kode CSS
174
Percobaan 2: Liquid Layout
Pada percobaan ini lakukan hal yang sama dengan percobaan 1 dan lihat perubahan pada
layout
Kode HTML

Kode CSS
Percobaan 3: Multiple Style sheet

Simpan kode css berikut di folder css dengan nama table.css
176
Simpan kode css berikut di folder css dengan nama font.css
Simpan kode css berikut di folder css dengan nama style.css

Simpan kode html berikut di folder web anda dimana folder css berada
178
Percobaan 4: Multiple Stylesheet Dengan Link
Simpan kode css berikut pada folder css dengan nama site.css
Kode html

Tugas
Tugas ini harus diselesaikan pada saat praktikum dan didemokan.
180

PRAKTIKUM 12
Responsive Design
Tujuan
- mahasiswa mampu memahami konsep responsive design
- mahasiswa mampu memahami CSS media query
- mahasiswa mampu memahami cara menangani gambar dalam responsive design
Dasar Teori
Saat penulisan buku ini, masih sering ditemukan berbagai website yang menggunakan
ukuran lebar halaman yang tetap, misalnya 960 pixel, dengan harapan bahwa semua pengguna
yang mengakses website tersebut akan mendapatkan tampilan yang sama dan pengalaman
yang sama saat berinteraksi dengan website terkait. Ukuran ini memang tidak terlalu lebar
untuk layar laptop dan pengguna dengan layar yang memiliki resolusi besar akan
mendapatkan margin yang cukup lebar di kanan kiri website.
Akan tetapi sekarang ada Smartphone. Di indonesia pengguna Smartphone kian

meningkat baik itu berbasis Android ataupun menggunakan produk Apple yakni iPhone.
Seperti beberapa data yang sempat dirillis, pengguna internet di Indonesia yang menggunakan
perangkat mobile dalam melakukan browsing di internet telah meningkat tajam. Belum lagi
ditunjang semakin meningkatnya pengguna tablet dimana ukuran layarnya lebih besar dari
smartphone dan lebih kecil dibandingkan laptop.
Sebelum kita bahas lebih lanjut, mari kita lihat gambar berikut ini yang menjelaskan
tentang berbagai ukuran resolusi layar yang digunakan diberbagai perangkat saat ini.
Gambar 12.1 Beberapa variasi ukuran layar pada beberapa jenis perangkat
Pengalaman yang berbeda akan dirasakan para pengguna smartphone saat melakukan
akses ke website dimana website tersebut menerapkan fixed width, misalnya 960 pixel. Maka

pengguna smartphone akan perlu melakukan zoom in zoom out untuk menampilkan atau
membaca tulisan yang ada di website tersebut. Belum lagi seringkali adanya salah pencet link
dikarenakan terlalu kecilnya tulisan.
Saat ini telah ada solusi untuk menangani berbagai ukuran layar yang berbeda tersebut.
Responsive Design, adalah salah satu istilah dari sekian istilah tentang konsep tampilan web
yang akan menyesuaikan dengan besarnya viewport(luasan area pada browser untuk
menampilkan website) yang digunakan oleh pengguna saat mengakses sebuah website.
Teknik ini didukung teknologi terbaru yakni HTML5 dan CSS3. Serunya teknik ini dapat
diimplementasikan tanpa harus berbasis server atau backend solutions.
Pada gambar berikut ini dapat kita lihat salah satu website yang menggunakan
teknikresponsive design dan ditampilkan dalam berbagai ukuran.
Gambar 12.2contoh tampilan responsive design (sumber gambar:

http://www.white-fire.co.uk)
Definisi Responsive Design
Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS,
maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan
adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang
sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based
seperti PHP, ASP atau lainnya. Teknik ini murni urusan UX designer atau front end designer.
Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah
artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia
mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media
queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah
yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber
layout, liquid design, adaptive layout, cross-device design, dan flexible design.
Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang
sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran
browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan
terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain
pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur
182
isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran
viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.
Viewport atau ukuran layar
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan
dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab,
address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan
dimana sebuah website ditampilkan pada browser. Sedangkan screen size mengacu pada
ukuran layar secara fisik.
Mengapa harus HTML5 dan CSS3?
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni
HTML4 dan element yang digunakan pada HTML5 lebih gampang kita pahami saat kita
membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang
merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur
lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya
gradient, shadows, animasi dan transformasi.
Galeri Responsive design
Sebelum kita membahas secara lebih detail tentang responsive design, mari kita lihat
beberapa website yang telah menerapkannya. Siapa tahu bisa menjadi inspirasi bagi anda.
Anda bisa langsung mencoba mengaksesnya melalui berbagai perangkat yang anda miliki.
Akan tetapi apabila anda hanya menggunakan komputer atau laptop, cobalah saat selesai
halaman web di load, silahkan secara perlahan lebar browser anda kecilkan. Bisa anda
lakukan dengan klik dan drag secara perlahan ke arah kiri pada batas tampilan sebelah kanan
browser anda. Anda akan melihat perubahan tampilan pada website-website tersebut.
Gambar 12.4 Tampilan website www.cognition.com

Gambar 12.5. Tampilan website www.teixido.com
Pada praktiknya, responsive design sebenarnya menggabungkan 3 hal utama yaitu:
- Layout yang fleksibel

- Gambar atau image yang fleksibel
- CSS media Query
Layout Fleksibel
Layout yang fleksibel adalah layout yang mampu menyesuaikan dengan ukuran browser
yang digunakan, dan hal ini sebenarnya sudah dibahas pada materi Layout dan tepatnya pada
fluid layout. Fluid layout merupakan sebuah layout dimana ukuran-ukuran elemen-elemen
boxnya tidak dalam satuan pixel, tapi dalam satuan persen. Contohnya seperti pada gambar
berikut:
Gambar 12.6. Contoh rancangan fluid layout
184
Selain berupa elemen-elemen box yang fleksibel, diperlukan elemen-elemen yang lain,
misalnya ukuran teks. Contohnya adalah saat anda mengatur ukuran font 100%, maka secara
default ukurannya adalah 16 pixel. Ukuran ini bisa berubah sesuai yang anda atur saat
terdeteksi ukuran layar yang berbeda.
Sesuatu yang tidak layak apabila kita harus membuat sebuah desain yang akan
ditampilkan pada ukuran lebar layar yang beragam. Desainer biasanya hanya membuat 2 atau
tiga jenis desain yang menarget ukuran layar dari peralatan yang banyak dipakai oleh
pengguna, misalnya smartphone, tablet atau dekstop. Fluid layout telah dibahas pada materi
sebelumnya, sehingga tidak ditambahkan disini.
Image yang Fleksibel
Saat ukuran layar atau browser lebih kecil dari layar desktop, misalnya pada tablet atau
smartphone, maka gambar harus bisa menyesuaikan ukurannya dengan kotak yang
menampungnya. Caranya cukup sederhana, yakni ukuran gambar kita atur dengan satuan
persen. Sehingga, saat diperkecil tampilan halamana webnya, maka gambar akan
menyesuaikan.
Salah satu contohnya adalah tampilan dari website alistapart.com dimana Ethan Marcotte
mencontohkan sebuah tampilan responsive design. Perhatikan pada ukuran layout dan gambar
yang ada di dalamnya
Gambar 12.7. Contoh tampilan image pada website alistapart.com
Ide dasar dari image yang fleksibel ini, atau biasa juga disebut dengan fluid image, adalah
dengan menggunakan gambar dengan ukuran maksimum, yang sesuai dengan ukuran gambar
tersebut akan ditampilkan pada halaman web. Anda tidak perlu mendeklarasikan ukuran lebar
dan tinggi dari gambar, akan tetapi menyerahkan sepenuhnya pada browser untuk merubah
ukuran tampilan gambar sesuai dengan ukuran layarnya.
Untuk mengatur fluid image, anda bisa melakukannya pada CSS dengan menuliskan
elemen gambar dan mengatur ukurannya dalam satuan persen
img { max-width: 100%; }
Dengan mengatur gambar pada ukuran tersebut, maka gambar akan ditampilkan pada ukuran
maksimal, saat area yang menampilkan gambar tersebut menjadi lebih kecil, dalam hal ini
browser, maka gambar akan tetap memakai ukuran 100% dari ukuran lebar browser saat itu.

Perlu menjadi catatan bahwa max-width tidak didukung oleh IE dan satu hal lagi bahwa
sebuah gambar akan ditampilkan terlalu kecil pada browser-browser versi lama Windows.
CSS Media Query

CSS3 tidak hanya mendukung semua tipe media seperti pada CSS 2.1, misalnya tipe
screen, print dan handheld, akan tetapi juga menambahkan sejumlah fitur media yang baru
seperti max-width, device-width, orientation dan color. Perangkat baru yang dibuat setelah
rilisnya CSS3, seperti iPad dan perangkat Android, akan mendukung CSS media Queri ini.
Melalui CSS media inilah yang akan mengecek ukuran viewport dari browser dan selanjutnya
akan menentukan style yang digunanakan.
Berikut contoh penulisan media queri
Pada contoh diatas, media query akan mengecek apabila browser menampilkan halaman pada
layar (bukan dalam bentuk cetak) dan ukuran layar sebesar 480 pixel atau dibawahnya, maka
file shetland.css akan digunakan.
Fitur baru pada CSS3 juga memasukkan orientation (portrait vs landscape), device-width,
min-device-width dan masih banyak lagi. Selain membuat beberapa file css untuk kebutuhan
responsive design ini, bisa juga dibuat dalam satu file css yang tentunya lebih efisien, dengan
catatan bahwa stylenya tidak terlalu rumit. Berikut ini contohnya:
186
Contoh kode di atas merupakan sebuah template gratis untuk multiple media queri pada
perangkat yang beragam. Template tersebut dibuat oleh Andy Clark.
Salah satu kekurangan dari media query ini adalah tidak bisa digunakan pada
browser-browser versi lama seperti IE 5+, Firefox 1+, dan Safari2. Untuk mengatasi hal
tersebut, anda bisa menggunakan cara yang lain yaitu dengan menggunakan javascript. Anda
bisa menggunakan javascript yang disediakan oleh google API.
Cara Kerja
2. Buat folder css dan images dan masukkan bahan gambar yang telah disediakan
8. Pada tiap percobaan, secara perlahan geser tepian browser untuk merubah ukuran lebar
layar browser anda dan perhatikan perubahan tampilan. Analisa hasilnya

Percobaan
Percobaan 1 : Media Query
188
Percobaan 2:Media Query pada Sidebar Layout

190
Percobaan 3 : Responsive Layout

192
Percobaan 4: Responsive Image
Percobaan 5: Responsive Content
194
196
Tugas
Dengan menggunakan bahan-bahan yang telah anda pelajari dari percobaan-percobaan pada
praktikum ini, buatlah sebuah desain layout yang responsive seperti rancangan pada gambar
berikut. Ingat bahwa selain layout yang responsive, gambar dan isi halaman juga harus
responsive. Perhatikan bahwa, isi dan gambar tidak harus sama, akan tetapi struktur layout
yang harus sama saat ukuran layar browser berbeda

Tampilan Versi desktop

Tampilan Versi tablet (perubahan pada Tampilan versi smartphone
jumlah foto tiap baris pada sidebar)
198


PRAKTIKUM 13
Animasi Dengan CSS3
Tujuan
- Mahasiswa memahami konsep dasar animasi CSS3
- Mahasiswa memahami konsep transisi
- Mahasiswa memahami konsep transformasi
Dasar Teori
Pada praktikum-praktikum sebelumnya, kita telah menggunakan beberapa fitur baru

di CSS3 untuk membuat rounded corner, gradient, dan juga drop shadow yang
semula hanya bisa dilakukan dengan menggunakan gambar. Pada bagian ini, kita
akan mempelajari tentang animasi dan efek-efek kreatif yang semula hanya bisa
dilakukan dengan Flash atau Javascript.
Pada bagian awal akan dibahas tentang transisi menggunakan CSS, misalnya untuk
membuat animasi yang secara perlahan memudar. Selanjutnya akan dibahas tentang
transisi untuk merubah posisi obyek, merubah ukuran, memutar atau menggeser
obyek.
Transisi CSS
Pada saat kita ingin memberikan efek pada sebuah link, semula dengan
menggunakan CSS, kita hanya bisa melakukannya dengan cara merubah warna link
pada saat mouse berada di atasnya, misalnya berubah menjadi kuning, saat mouse
bergeser, maka warna akan kembali seperti semula. Dengan efek transisi dari CSS 3,
kita bisa membuat perubahan beberapa warna sekaligus saat mouse berada di atas
link. Misalnya saat mouse berada di atas link, secara perlahan warnanya akan
berganti-ganti, mulai dari biru, kuning, orange, dan warna lain yang bergantian secara
perlahan. Itulah salah satu gambaran aplikasi transisi pada CSS 3.
Transisi melalui CSS sebenarnya dikembangkan oleh tem Webkit untuk browser
Opera dan saat ini tim tersebut ikut bergabung dalam menyelesaikan Working Draft
untuk W3C. Saat ini baru browser versi terbaru yang mendukung transisi ini. Browser
yang tidak mendukung sama sekali adalah Internet Explorer 9 dan versi-versi
sebelumnya, Firefox 3.6 dan versi dibawahnya, dan Opera 10.1 dan versi-versi
sebelumnya.
Untuk menerapkan transisi CSS, ada beberapa hal yang perlu diperhatikan, yang
kaitanya dengan property CSS yang digunakan, yaitu:
- Property CSS yang mana yang akan dirubah (transition-property)
- Berapa lama durasinya (transition-duration)
- Perilaku transisi seperti apa (transition-timing-function)
- Apakah perlu berhenti sebentar sebelum transisi dimulai (transition-delay)
200
Selain itu, dibutuhkan semacam trigger untuk memicu transisi, misalnya :hover, :focus
atau :active merupakan beberapa pilihan yang biasa digunakan untuk memicu
terjadinya transisi.
Contoh penulisannya seperti berikut ini:
a.smooth{
transition-property: background-color;
transition-duration: 0.3 s;
transition-timing-function: ease-in-out;
}
Mengaplikasikan Multiple Transisi

Transisi tidak hanya bisa dilakukan pada satu property seperti pada contoh
sebelumnya. Akan tetapi transisi juga bisa dilakukan pada beberapa property.
Caranya adalah dengan memisahkannya dengan tanda koma, misalnya seperti
contoh di bawah ini:
a.smooth {
…
transition-property: background-color, color, letter-spacing;
transition-duration: 0.3s, 2s, 0.3s;
transition-timing-function: ease-out, ease-in, ease-out;
}
Durasi untuk tiap property sesuai dengan urutan pada transition-duration, misalnya
untuk warna teks, maka durasinya 2s atau dua detik dan menggunakan ease-in pada
transition-timing-function.
Transformasi CSS
Transformasi pada CSS3 memungkinkan anda untuk memutar, memindah, merubah
ukuran atau memiringkan elemen HTML baik dalam ruang 2 dimensi atau 3 dimensi.
Pada praktikum ini hanya fokus pada ruang 2 dimensi. Transformasi didukung hampir
semua browser terbaru kecuali pada versi-versi lama seperti IE8 kebawah, Firefox 3
ke bawah, dan Opera 10.1 kebawah.
Gambar berikut menunjukan 4 tipe transisi untuk 2 dimensi.

Saat sebuah elemen mengalami transformasi, sebenarnya box elementnya tetap
berada di posisi semula. Sehingga, saat anda memutar sebuah element, maka
sebenarnya yang digerakkan adalah gambarnya saja. Gambar tersebut tidak akan
berpengaruh terhadap layout di sekitarnya.
Rotate
Untuk memutar elemen, anda bisa menuliskan transform: rotate(sudutnya).
Contohnya seperti di bawah ini:
img {
width: 300px;
height: 400px;
transform: rotate(-10deg);
}
Pada contoh di atas, obyek akan berputar pada titik tengahnya dengan sudut 10
derajat. Anda juga bisa merubah titik pusat perputarannya.
Translate
Translate merupakan cara transformasi dengan memindah lokasi dari elemen
tersebut. Perpindahan ini mengacu pada sumbu x dan sumbu y. Contoh property
yang bisa digunakan untuk translasi adalah:
transform: translateX(50px);
transform: translateY(25px);
transform: translate(50px, 25px);
Contoh aplikasinya seperti pada gambar di bawah ini:
202
Scale
Scale merupakan salah satu transformasi dengan merubah ukuran elemen, baik
memperbesar atau memperkecil ukurannya. Perubahan ukuran ini mengacu pada
sumbu X dan sumbu Y. Berikut ini contoh penulisan untuk merubah ukuran 150%.
a img {
transform: scaleX(1.5);
}
Penulisan untuk sumbu x dan y sekaligus, bisa dituliskan seperti contoh di bawah ini:
a img {
transform: scale(2, .5);
}
Pada contoh diatas, ukuran akan berubah lebarnya 2 kali lipat dan dan setengah dari
tinggi seharusnya. Contoh penerapannya seperti di bawah ini:
Skew
Skew merupakan transformasi untuk memiringkan obyek dengan patokan sumbu x
dan sumbu y yakni dengan merubah sudut baik horizontal atau vertikal. Berikut ini

beberapa contoh penulisan skew
a img {
transform: skewX(15deg);
}
a img {
transform: skewY(30deg);
}
a img {
transform: skew(15deg, 30deg);
}
Hasil dari kode diatas dapat dilihat pada gambar berikut
Menggunakan Keyframe
Untuk membuat animasi yang biasa dilakukan dengan Flash, dan Javascript, kita bisa
menggunakan aturan keyframe yang ada pada CSS3. Aturan keyframe yang dituliskan
@keyframe merupakan awal dimana animasi CSS dimulai. Anda tinggal menentukan style
didalam @keyframe dan animasi akan berjalan mulai perubahan style awal hingga akhir.
Saat penulisan modul ini, Internet Explorer belum mendukung @keyframe. Untuk Firefox
membutuhkan prefix –moz-, chrome dan safari membutuhkan prefix –webkit- dan opera
membutuhkan prefix –o-.
Langkah pertama yang perlu dilakukan adalah mendefinisikan animasi yang akan dibuat,
contohnya seperti di bawah ini.
204
Pada contoh di atas, kita mendefenisikan sebuah animasi dengan nama myfirst. Selanjutnya
kita perlu menentukan animasi ini akan diterapkan dimana, misalnya pada sebuah selector
<div>. Apabila kita tidak menentukannya, maka animasi tidak akan bisa berjalan.
Saat kita menempelkan animasi kita pada sebuah selector, setidaknya kita perlu menentukan 2
property animasi, yaitu:
- tentukan nama animasi
- tentukan durasi animasi.
Berdasarkan contoh di atas, kita bisa menuliskannya seperti di bawah ini:
Karena kita telah menggunakan myfirst sebagai nama animasi yang dibuat, maka nama
tersebut harus dituliskan apabila kita ingin menggunakannya. Selain itu juga perlu dituliskan
durasi berapa lama animasi akan berjalan. Apabila durasi tidak dituliskan, maka animasi tidak
akan berjalan, karena secara default nilainya adalah 0.
Menggunakan Porsentase Untuk Pergantian State Animasi

Animasi pada CSS merupakan sebuah efek yang memungkinkan elemen secara perlahan
berubah dari satu style ke style yang lain. Anda bisa merubah sebanyak mungkin style yang
anda inginkan dan berapa kali anda menginginkannya. Penentuan pergantian bisa dilakukan
dengan menggunakan porsentase. Porsentase ini sebenarnya sama dengan from dan to, yakni
from berarti 0% dan to berarti 100%. Perbedaanya, kita bisa menuliskan nilai diantara 0% -
100%, misalnya saat mencapai 50%, kita bisa melakukan perubahan efek yang lain.
Berikut ini contoh penggunaannya
Pada contoh diatas, perubahan dilakukan saat berada pada 0%, 25%, 50% dan 100%. Untuk
memastikan dukungan browser, anda harus menuliskan posisi 0% dan 100%.
Berikut ini property lengkap dari animasi CSS 3

Property Deskripsi
@keyframes Menentukan animasi
animation Merupakan penulisan singkat dari semua property animasi,
kecuali animation-play-state-property
animation-name Nama animasi @keyframes
animation-duration Menentukan berapa detik atau mili detik animasi akan
berjalan
animation-timing-function Bagaimana animasi akan berjalan menyelesaikan satu cycle.
Defaulenya adalah “ease”
animation-delay Menentukan kapan animasi akan dimulai, defaultnya adalah
0
206
animation-iteration-count Menentukan jumlah berapa kali animasi akan berjalan saat
selesai satu cycle
animation-direction Menentukan apakah animasi akan dimainkan secara normal
atau sebaliknya. Nilai defaultnya adalah normal
animation-play-state Menentukan apakah animasi dimainkan atau dihentikan
sementara (pause). Nilai defaultnya adalh “running”
Langkah Kerja
2. Buat folder css dan images dan masukkan bahan gambar yang telah disediakan
8. Pada tiap percobaan, secara perlahan geser tepian browser untuk merubah ukuran lebar
layar browser anda dan perhatikan perubahan tampilan. Analisa hasilnya
Percobaan
Percobaan 1: Transisi Dasar

Coba letakkan kursor pada link yang ada dan perhatikan perubahan warna yang
terjadi. Coba rubah nilai pada durasi, silahkan turunkan dan naikkan nilainya dan lihat
perubahan warna yang terjadi.

Percobaan 2: Transisi Spesifik untuk browser tertentu
Letakkan mouse pada obyek yang ada pada browser saat kode berikut ini dijalankan.
Coba hilangkan durasinya, dan analisa hasilnya.
Percobaan 3: Merubah Lebih dari satu property

Jalankan pada browser Firefox, Opera, Chrome dan Internet Explorer. Analisa
208
hasilnya

Percobaan 4: Translasi untuk semua browser
Jalankan pada browser Firefox, Opera, Chrome dan Internet Explorer. Analisa
hasilnya dan bandingkan hasilnya dengan percobaan sebelumnya.
210

Percobaan 4: Rotate
Coba jalankan pada Opera, Firefox, Chrome, dan IE. Analisa hasilnya

Percobaan 5: Multiple Rotate


Percobaan 6: Merubah Titik sumbu putaran
Jalankan kode berikut pada browser anda, selanjutnya pada transform-origin, rubah nilainya
secara bergantian dengan nilai-nilai berikut:
- left bottom
- 50% 0%
- 150px 50px
Setiap merubah nilainya, jalankan pada browser dan perhatikan perbedaannya. Analisa
hasilnya

212


Percobaan 7: Translasi

Arahkan mouse anda pada gambar dan lihat perubahannya
214

Percobaan 8 : Scale
Jalankan hasil dari kode program dibawah ini, kemudian letakkan kursor di atas gambar. Lihat
hasilnya. Selanjutnya, pada -moz-transition:-moz-transform 2s; pindahkan kode tersebut
dari .produk ke .produk:hover. Sehingga kode tersebut hilang pada bagian .produk. Jalankan
pada browser, dan analisa hasilnya


Percobaan 9: Skew

216

Percobaan 10: Menerapkan Multiple Transform

Tugas
Buatlah halaman galeri foto dengan menggunakan HTML dan CSS. Saat foto di klik, maka foto
akan berputar perlahan dan di zoom. Foto tidak harus disusun sejajar, foto bisa disusun
secara berserakan. Sebagai contoh seperti gambar di bawah ini:


218

Praktikum 14
Pengenalan JavaScript
Tujuan
- Mahasiswa memahami konsep dasar Javascript
- Mahasiswa mampu memahami cara menggunakan Javascript
- Mahasiswa mampu memahami dasar variabel di Javascript
- Mahasiswa mampu memahami konsep dasar DOM
Dasar Teori
Javascript merupakan bahasa pemrograman berbasis client-side yang berfungsi untuk
menjadikan halaman web menjadi interaktif. Client-side berarti bahasa ini akan berjalan pada
client dan tidak membutuhkan server tersendiri layaknya PHP. Javascript sebenarnya tidak
ada kaitannya sama sekali dengan Java. Javascript dibuat pada tahun 1995 oleh Brendan Eich
di Netscape dengan nama asli “Livescript”. Saat itu Java sanga populer dan untuk kebutuhan
pemasaran, maka Livescript menjadi Javascript atau yang biasa disingkat JS.
Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang
terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat
kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya
kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa
itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4
desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk
mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet
Explorer 3.
Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang
berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript
juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada
kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain
halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang
memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.
Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode
langsung di tulis di dalam dokumen HTML dan sangat mudah terlihat, sedangkan di Java,
kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat
dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk
menterjemahkan program di dalam applet tersebut setiap kali halaman HTML yang memuat
applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat
dibuka oleh browser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di load) oleh
navigator.
14.1. Menambahkan Javascript

Layaknya CSS, anda bisa langsung menambahkan javascript langsung pada dokumen html
anda atau anda bisa juga menyimpannya sebagai file yang terpisah dan kemudian
memanggilnya melalui link. Kedua metode tersebut sama-sama membutuhkan elemen
<script>

• Menempelkan Javascript
Untuk menempelkan langsung Javascript pada dokumen web anda, cukup anda
tuliskan elemen <script> seperti contoh di bawah ini:
<script>
.... kode javascript ada disini
</script>
• Eksternal File
Metode yang lain adalah dengan menggunakan atribut src yang diarahkan ke file
javascript yang disimpan dengan format ekstensi .js. Contohnya seperti di bawah ini:
<scriptsrc=”script_baru.js”></script>
Keuntungan menggunakan file javascript yang terpisah, adalah anda bisa menggunakan file
yang sama pada halaman-halaman web yang lain, sama halnya dengan file css yang terpisah.
Kekurangannya adalah saat pemanggilan file javascript tersebut membutuhkan penambahan
permintaan ke server berbasis HTTP yang tentunya juga memperlambat performanya.
Catatan:
Pada versi HTML 4.01, penulisan tag <script> harus dilengkapi dengan atribut type agar
bisa dikenali.
<script type=”text/javascript”> .. </script>
Pada HTML 5, penulisannya di persingkat menjadi <script> dengan catatan pada tiap awal
halaman dituliskan <!doctype html> untuk menunjukkan halaman tersebut adalah HTML5.
14.2. Variabel
Variable adalah suatu obyek yang berisi data data, yang mana dapat di modifikasi selama
pengeksekusian program. Di JavaScript kita bisa memberikan nama variabel sepanjang yang
kita suka, akan tetapi harus memenuhi kriteria berikut ini .
• Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau
satu karakter ''_''.
• Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter _ dan & (spasi
kosong tidak diperbolehkan).
• Nama variabel tidak boleh memakai nama nama berikut ini (reserved oleh program)
o abstract
o boolean break byte
o case catch char class const continue
o debugger default delete do double
o else export extends
o false final finally float for function
o goto
o if, implements, import, in, infinity, instanceof, int, interface
o label, long
o native, new, null
o package, private, protected, public
o return
o short, static, super, switch, synchronized
o this, throw, throws, transient, true, try, typeof
220
di JavaScript menggunakan sistem case sensitive yang artinya membedakan nama variabel
dengan huruf besar dan huruf kecil, oleh karena itu biasakanlah memberikan nama variabel
dengan aturan yang sama, huruf besar semua atau huruf kecil semua (disarankan
menggunakan selalu huruf kecil).
Mendeklarasikan Variabel
Penulisan variabel JavaScript sangatlah fleksibel, dan tidaklah terlalu rumit dan ketat,
sehingga kita tidaklah terlalu sering menerima pesan error pada saat menjalankan program.
Sebagai contoh deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :
• eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel
dan nilai dari variabel :
var test = “halo”
• implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari
variabel :
test = “halo”
Navigator secara otomatis akan memperlakukan pernyataan itu sebagai deklarasi dari sebuah
variabel. Pada navigator versi lama mungkin terjadi kasus di mana navigator tidak mengenali
pendeklarasian variabel secara implisit, maka disarankan untuk menggunakan cara eksplist
dalam menulis program JavaScript.
Alat dan Bahan

yang lainnya
- Bahan-bahan gambar untuk tampilan pendukung di halaman web
Langkah Kerja
2. Buat folder css, js dan images dan masukkan bahan gambar yang telah disediakan

Percobaan
Percobaan 1: Menulis ke halaman web melalui javascript
Percobaan 2: Merespon event
Percobaan 3: Merubah Style Elemen HTML melalui javascript
222
Percobaan 4: Pengenalan Variabel dan Aritmatika Sederhana

Percobaan 5: Tipe Data
224
Percobaan 6: Merespon Event dan memberikan informasi berupa alert
Percobaan 7: Memanggil Fungsi

Percobaan 8: Menampilkan Kotak Konfirmasi
226
Percobaan 9: Menampilkan prompt box
Percobaan 10: Mengatur Interval

Percobaan 11: Validasi Input
Tugas
1. Buatlah sebuah form registrasi yang mencatat nama, username, email, password, no
telepon, jenis kelamin, dan alamat website. Kemudian lengkapi form tersebut dengan
validasi menggunakan javascript pada nama, username, dan email.
2. Buatlah sebuah kotak dengan elemen div, kemudian dengan menggunakan set interval,
secara periodik, setiap 4 detik, rubahlah background gambar kotak tersebut, bergantian
sebanyak 5 gambar.
228
Praktikum 15
Menggunakan DOM
Tujuan
- Mahasiswa mampu memahami konsep DOM
- Mahasiswa mampu memahami cara memanipulasi elemen melalui DOM
Dasar Teori
Pada praktikum-praktikum sebelumnya, sebenarnya anda telah sering menjumpati DOM yang
merupakan kepanjangan dari Data Object Model, akan tetapi pada bagian ini akan kita bahas
secara lebih mendalam. Untuk lebih memudahkan memahami DOM, silahkan anda perhatikan
kode HTML di bawah ini dan perhatikan gambar berupa tree di bawahnya.
<html>
<head>
<title>Document title</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h2>Subhead</h2>
<p>Paragraph text with a <a href="foo.html">link</a> here.</p>
</div>
<div>
<p>More text here.</p>
</div>
</body>
</html>
Gambar 14.1. Bentuk diagram pohon dari elemen kode HTML

Setiap elemen dalam sebuah halaman, disebut dengan node. Apabila kita analogikakan
DOM sebagai sebuah pohon, maka setiap node merupakan cabang tersendiri dimana
masing-masing cabang tersebut dapat berisi cabang-cabang yang lain. DOM memberikan
akses yang lebih jauh ke bagian content apabila dibandingkan dengan CSS, karena DOM
memperlakukan content sebagai sebuah node. Pada gambar 14.1, elemen p yang bisa jadi
berisi content, diperlakukan sebagai sebuah node.
DOM memungkinkan kita untuk mengakses dan memanipulasi content pada sebuah dokumen
web.
Mengakses Node DOM
Ada beberapa cara yang bisa digunakan untuk mengakses node DOM melalui javascript,
berikut ini cara-cara yang bisa dipakai:
1. Dengan Nama Elemen
Kita dapat mengakses elemen dengan menggunakan tag elemen itu sendiri yakni
dengan menggunakan document.getElementByTagName(). Contoh penggunaannya
seperti di bawah ini:
document.getElementByTagName(“p”);
Contoh diatas akan mengakses semua elemen paragraph yang ada dihalaman web
yang dimaksud. Paragraph akan diurutkan dengan cara paragraph[0] untuk paragraph
pertama, paragraph[1] untuk paragrap kedua dan seterusnya.
2. Dengan atribut id
Cara ini akan mengembalikan nilai berupa sebuah elemen dengan nama id yang sesuai.
Cara yang digunakan adalah dengan menuliskan document.getElementById
(“namaid”). Misalnya seperti di bawah ini:
<img src=”foto.jpg” id=”fotoprofil”>
Kita bisa mengakses elemen dengan id tersebut dengan cara
var foto=document.getElementById(“fotoprofil”);
3. Dengan atribut class

Sama halnya dengan id, cara ini akan mengakses elemen tertentu sesuai dengan nama
class yang diinginkan. Caranya seperti berikut ini:
var kolommenu=document.getElementByClassName(“sidebar”);
Alat dan Bahan

yang lainnya
- Browser untuk mencoba hasil output
- File library Javascript jQuery.
pada list
Langkah Kerja
230
2. Buat folder css, js dan images
Percobaan
Percobaan 1: Property innerHTML
<html>
<body>
<p id="intro">Belajar tentang DOM</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
Percobaan 2: Mendapatkan data dari sebuah elemen
<!DOCTYPE html>
<html>
<body>
<p id="intro">Belajar Tentang DOM</p>
<script>
x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Percobaan 3: Method getElementById
<!DOCTYPE html>
<html>
<body>
<p id="intro">Belajar DOM</p>

<p>Contoh berikut ini menggunakan <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>Teks dari paragraph id intro: " + x.innerHTML + "</p>");
</script>
</body>
</html>
Percobaan 4: Method getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<p>Belajar DOM (par 1)</p>

<p>Pemahaman DOM sangat membantu (par 2)</p>
<p>Contoh ini menggunakan <b>getElementsByTagName</b> method.</p>
<script>
x=document.getElementsByTagName("p");
document.write("Teks dari paragrap pertama: " + x[0].innerHTML);
</script>
</body>
</html>
232
Percobaan 5: Memodifikasi Isi Halaman HTML
<!DOCTYPE html>
<html>
<body>
<p id="p1">Belajar DOM</p>
<script>
document.getElementById("p1").innerHTML="Teks baru";
</script>
<p>Paragraph di atas isinya diganti melalui skrip</p>

</body>
</html>
Percobaan 6: Merubah Style HTML
<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
Percobaan 7: Membuat elemen baru
<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">Bagian Paragrap satu</p>
<p id="p2">Bagian paragap dua.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("Ini paragap baru.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
Percobaan 8: Menggunakan Event
<!DOCTYPE html>
<html>
<body>
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="Rubah Warna Background">
</body>
</html>
Tugas
1. Buatlah sebuah form registrasi yang mencatat informasi tentang:
- nama
- username
- email
- jenis kelamin
- tanggal lahir
Saat pengguna selesai mensubmit, tampilkan hasil isiannya di halaman yang sama untuk
masing-masing input.
234
2. Buatlah sebuah galeri yang berisi minimal 5 foto. Tampilkan satu foto untuk tiap halaman.
Saat pengguna melakukan klik pada foto, maka foto berikutnya akan ditampilkan.
Tampilkan informasi tentang nomor urut dan deskripsi pada tiap foto.

Praktikum 16
Javascript Library
Tujuan
- Mahasiswa mampu memahami konsep javascript library
- Mahasiswa mampu menggunakan jQuery
- Mahasiswa mampu memahami animasi dengan jQuery
Dasar Teori
Pada saat menggunakan javascript, seringkali yang kita lakukan adalah proses yang sama
yang orang lain juga banyak melakukannya, misalnya saat sebuah notikasi di klik, maka
secara perlahan notifikasi ditampilkan dengan animasi fade in. Karena animasi sederhana
seperti contoh tersebut sudah banyak dilakukan oleh orang lain, maka sebenarnya kita tidak
perlu menulis kodenya mulai dari awal. Berdasarkan hal inilah akhirnya muncul javascript
library. Javascript library merupakan kumpulan dari fungsi-fungsi yang bisa langsung kita
gunakan untuk menyelesaikan proses-proses yang banyak kita gunakan atau bahkan untuk
menyelesaikan proses yang kompleks.
Terdapat banyak sekali library javascript yang bisa gunakan, mulai dari yang skala kecil
hingga besar. Untuk ukuran yang besar biasanya terdiri dari fungsi-fungsi yang cukup banyak,
adanya shortcut, dan juga dilengkapi dengan widget yang memungkinkan kita untuk
membangun aplikasi full Ajax. Beberapa library juga dibuat dengan target khusus, misalnya
menangani form, animasi, grafik, atau fungsi-fungsi matematika. Bagi seorang programmer
professional, library javascript dapat menghemat waktu pengerjaan. Dan bagi para pemula
seperti anda, library javascript dapat membantu anda untuk menyelesaikan permasalahan
yang diluar jangkauan skill anda.
Salah satu kekurangan dalam penggunaan library Javascript adalah biasanya
fungsi-fungsi yang cukup banyak tersebut ditampung dalam sebuah file berekstensi .js yang
akhirnya memaksa user untuk mendownload sejumlah kode yang cukup banyak dan tidak
semuanya dipakai. Akan tetapi hal ini telah diantisipasi oleh pengembang library javascript
yang kemudian telah membuat librarynya modular, dan mereka terus berusaha untuk
mengoptimalkan library mereka.
Contoh Library Javascript

Beberapa contoh library javascript yang cukup populer pada saat penulisan modul ini
diantaranya:
- jQuery (jquery.com)
jQuery ditulis sekitar tahun 2005 oleh Jon Resig, yang telah menjadikannya library
paling populer saat ini. Library ini gratis digunakan, open source, dan didukung syntax
yang gampang dipakai apabila anda telah terbiasa dengan CSS, Javascript dan DOM.
Anda bisa melengkapi jQuery dengan jQuery UI library, yang memungkinkan anda
236
untuk menambahkan elemen interface yang cukup menarik, misalnya kalender, fungsi
drag dan drop, serta efek animasi sederhana. Selain itu jQuery juga tersedia untuk
kebutuhan mobile.
- Dojo (dojotoolkit.org)
Dojo merupakan sebuah library yang open source dan sangat membantu saat
mengembangkan aplikasi web dengan Ajax
- Prototype (prototypejs.org)
Library ini ditulis oleh Sam Stephenson yang dikembangkan untuk memberi dukungan
Ajax pada Ruby on Rails
- MooTools (mootools.net)
MooTools merupakan kepanjangan dari My Object-oriented Tools dibuat oleh Valerio
Proietty yang tersedia secara open source.
- YUI (yuilibrary.com)
YUI, yang merupakan kepanjangan dari Yahoo User Interface, merupakan pilihan lain
untuk library javascipt yang gratis. Library ini merupakan bagian dari proyek di Yahoo
yang dikembangkan oleh Thomas Sha.
Menggunakan jQuery
Penggunaan berbagai library javascript yang telah disebutkan sebelumnya cukup mudah,
yakni anda cukup mendownload file javascript yang berekstensi .js, kemudian menaruhnya
pada web server anda. Apabila anda menggunakannya secara offline tanpa web server, anda
bisa langsung menaruhnya pada folder proyek web anda. Selanjutnya anda tinggal
menambahkan script yang akan memanggil library tersebut.
Pada praktikum ini, kita akan menggunakan jQuery mengingat library ini yang paling
populer saat buku ini ditulis.
Untuk dapat menggunakan jQuery, ikuti langkah-langkah berikut ini:
1. Download file jQuery.js
Download file jQuery dengan mengunjungi website jQuery.com, kemudian klik pada
tombol Download yang cukup besar. Anda bisa memilih untuk mendownload versi
“production” yang ukurannya lebih kecil, atau versi “development” yang isinya lebih
mudah dibaca, tapi ukurannya 7 kali lipatnya dibandingkan dengan versi
“development”. Versi production cukup bagi anda, apabila anda hanya ingin
menggunakan library tersebut tanpa perlu melakukan perubahan didalamnya.
Saat anda melakukan klik pada Download, maka file akan ditampilkan pada halaman
web anda. Anda bisa langsung melakukan penyimpanan melalui menu File, Save As
dan menyimpannya sebagai file berkestensi .js. Untuk versi produksi, biasanya akan
ada kata “min” dinama file yang kita donwload, misalnya jquery-1.7.2.min.js
Simpan file hasil download pada folder js yang ada pada folder proyek web anda.
Tujuan folder tersebut untuk mengumpulkan file .js yang kita pakai.
2. Tambahkan ke dokumen anda
Cara untuk menambahkan jQuery ke halaman web anda cukup sederhana, yakni saa
dengan saat anda menambahkan file .js lainnya ke halaman web yang anda buat.
Contoh penulisannya seperti di bawah ini:
<script src="pathtoyourjs/jquery-1.7.2.min.js"></script>
Apabila anda tidak ingin menaruh file jQuery pada web server anda, anda sendiri
dapat menggunakannya dengan cara memanggil dari penyedia layanan tersebut,
seperti Google. Contoh penulisannya seperti berikut ini dan ditempatkan pada bagian
head:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
3. Gunakan “ready”
jQuery memiliki sebuah statemen yang dikenal dengan ready event yang akan
mengecek dokumen web anda dan menunggu sampai dokumen tersebut siap untuk
dimanipulasi oleh jQuery. Tidak semua skrip membutuhkannya, musalnya saat anda
hanya ingin menampilkan alert.
Contoh penulisannya seperti di bawah ini:
<script src="pathtoyourjs/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
// Your code here
});
</script>
Alat dan Bahan

yang lainnya
- Browser untuk mencoba hasil output
- File library Javascript jQuery.
pada list
Langkah Kerja
9. Buat folder css, js dan images dan masukkan bahan gambar yang telah disediakan
238
Percobaan
Percobaan 1: Selector
Petunjuk:
- Simpan percobaan berikut sebagai file .html, dan jalankan pada browser. Klik pada
tombol dan lihat hasilnya
- Selanjutnya pada baris ke 8, rubah selectornya yang semula $(this) menjadi $(“p”).
Lihat hasilnya pada browser dan analisa
- Selanjutnya rubah kembali pada baris 8 menjadi $(“#test”) . Lihat hasilnya pada
browser dan analisa
- Selanjutnya rubah kembali pada baris 8 menjadi $(“.test”) . Lihat hasilnya pada
browser dan analisa

Percobaan 2: Events
Petunjuk:
- Simpan percobaan berikut sebagai file .html, dan jalankan pada browser. Gerakkan
pointer mouse anda ke area paragraf dan lihat hasilnya
- Selanjutnya pada baris ke 7, rubah mouseenter menjadi mouseleave, kemudian
gerakkan mouse anda ke area paragraph dan secara perlahan keluar dari area tersebut,
seharusnya sebuah alert akan muncul.
- Pada baris ke 7, rubah mouseleave menjadi mousedown, kemudian klik pada area
paragraph. Lihat hasilnya
- Secara berturut-turut, lakukan langkah yang sama dan rubah mousedown menjadi
o mouseup
o hover
- analisa hasilnya
240
Percobaan 4: Hide, Slide Up, Toggle, dan FadeIn
Petunjuk:
- simpan sebagai file .html dan jalankan pada browser.
- Secara berturut-turut, pada baris ke 8, rubah hide menjadi toggle, fadeIn, slideUp dan
jalankan pada browser setiap kali anda melakukan perubahan.

Percobaan 5: Animasi Sederhana
Percobaan 6: Mendapatkan Data Input
242
Tugas

1. Buatlah sebuah form untuk menuliskan komentar dan menampilkan hasilnya langsung
pada area di atas form tersebut setelah tombol submit ditekan. Pada saat tombol submit
ditekan, maka kotak form disembunyikan. Saat ingin mengisi komentar lagi, kotak form
bisa dimunculkan dan isi komentar akan bertambah. formatnya seperti rangkaian
gambar berikut ini. Link untuk menampilkan komentar juga harus dibuat.


2.

Daftar Pustaka
[1] Ducket, Jon. 2011.HTML & CSS, Design and Build Websites. Indiana: John Wiley &
Sons, Inc.
[2] Niederst R, Jennifer. 2012. Learning Web Design. California: O’Reilly Media, Inc.
[3] Frain, Ben. 2012. Responsive Web Design with HTML5 and CSS3. Birmingham: Packt
Publishing Ltd.
[4] Griffiths, Patrick. 2007. The Best Practice Guide to XHTML & CSS. California: New
Riders
[5] Smashing Magazine. 2011. Mastering CSS for Web Developers. Freiburg: Smashing
Media
[6] McNeil, Patrick. 2010. The Web Designer’s Idea Book, Vol 2. Ontario: How Books.
[6] Nick La. “Responsive Design in 3 Steps”.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps (diakses tanggal 3
Desember 2012)
[7] Knight, Kayla. “Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?”.
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-th
e-right-one-for-you/ (diakses tanggal 20 November 2012)
244

Modul Praktikum Barumac Nov Edited

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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 Praktikum Barumac Nov Edited

Diunggah oleh

Hak Cipta:

Format Tersedia

Buku

Surabaya, 10 Desember 2012

Modul Praktikum Desain Web – PENS – Dwi Susanto 3

Kata Pengantar ................................................................................................................................. 2

Modul Praktikum Desain Web – PENS – Dwi Susanto 5

Modul Praktikum Desain Web – PENS – Dwi Susanto 7

Struktur Penulisan Buku

Modul Praktikum Desain Web – PENS – Dwi Susanto 9

Bagaimana Website Dibuat

Modul Praktikum Desain Web – PENS – Dwi Susanto 11

Contoh tampilan sebuah website yang dilengkapi dengan video

HTML 5 dan CSS3 cukup populer saat penulisan buku ini

Bagaimana Cara Kerja Website

Gambar tentang cara kerja web.

Modul Praktikum Desain Web – PENS – Dwi Susanto 13

Gambar 1.1 Contoh tampilan sebuah artikel pada website alistapart.com

Modul Praktikum Desain Web – PENS – Dwi Susanto 15

1.1 Struktur Dokumen HTML

Gambar 1.1 Struktur dokumen HTML

Gambar 1.2. Detail keterangan tag

Modul Praktikum Desain Web – PENS – Dwi Susanto 17

Gambar 1.4 Atribut

1.1.3. Body, Head dan Title

2. Cara Membuat Halaman Web

Modul Praktikum Desain Web – PENS – Dwi Susanto 19

Gambar 1. Contoh struktur folder sebuah website

Modul Praktikum Desain Web – PENS – Dwi Susanto 21

Percobaan 5: Memasukkan garis Horizontal

Percobaan 6: Paragraph : lebih lanjut

Percobaan 8: Format Teks

Percobaan 9: Menampilkan teks apa adanya

Modul Praktikum Desain Web – PENS – Dwi Susanto 23

Percobaan 11: Menuliskan Kontak

Percobaan 13: Arah Teks

Percobaan 14: Kutipan Panjang dan Pendek

Modul Praktikum Desain Web – PENS – Dwi Susanto 25

<img> <img src="images/gambar_web.jpg" alt="Ideas

Modul Praktikum Desain Web – PENS – Dwi Susanto 29

Gambar 2.3 link

Link ke halaman website yang lain

<a href=”http://www.eepis-its.edu”> Kampus PENS </a>

<a href=”profil.html”> Profil Saya </a>

Gambar 2.4 Contoh struktur folder

Tipe Link Contoh Penulisan

Folder yang sama Untuk membuat link ke halaman about.html dari

Modul Praktikum Desain Web – PENS – Dwi Susanto 31

Parent Folder Untuk membuat link ke halaman index.html yang

Percobaan 2: Atribut Align

Modul Praktikum Desain Web – PENS – Dwi Susanto 33

Percobaan 4: Atribut alt

Percobaan 5: Atribut hspace dan vspace

Percobaan 7 : Link ke Dokumen Lain

Modul Praktikum Desain Web – PENS – Dwi Susanto 35

Percobaan 10: Link Pada Halaman Yang Sama

Modul Praktikum Desain Web – PENS – Dwi Susanto 37

Buatlah halaman website sesuai

Modul Praktikum Desain Web – PENS – Dwi Susanto 39

Modul Praktikum Desain Web – PENS – Dwi Susanto 41

Ada kalanya kita perlu

Saat anda menuliskan colspan,

Modul Praktikum Desain Web – PENS – Dwi Susanto 43

Ini bisa dilihat pada baris ketiga dan

Percobaan 2 : List Berurutan