Modul Praktikum

BAB 1
MARKUP HTML
POKOK BAHASAN:
• Struktur Dasar Halaman HTML
TUJUAN BELAJAR:
Setelah melaksanakan praktikum ini, mahasiswa diharapkan mampu:
• Mengetahui cara kerja, elemen-elemen, dan atribut (X)HTML
• Mengetahui interpretasi dokumen (X)HTML pada web browser
• Memahami struktur dasar dokumen (X)HTML
Apa itu HTML?

HTML adalah sebuah bahasa untuk mendeskripsikan halaman web.
• HTML kependekan dari Hyper Text Markup Language
• HTML bukanlah bahasa pemrograman, akan tetapi sebuah bahasa markup
• Sebuah bahasa markup merupakan sekumpulan markup tags
• HTML menggunakan markup tags untuk mendeskripsikan halaman web
HTML Tags
Tag markup HTML biasanya disebut tag HTML
• Tag HTML merupakan kata kunci yang berada di dalam kurung sudut seperti
<html>
• Tag HTML dituliskan berpasangn seperti <b> dan </b>
• Tag pertama dalam sebuah pasangan merupakan tag awal/pembuka, dan tag
kedua adalah tag penutup
Tag pembuka Isi (teks atau elemn HTML lain) Tag penutup
<nama elemen> Isi di sini </nama elemen>
Web Browser
Web Browser berfungsi untuk membaca dokumen html dan menampilkannya sebagai
halaman web. Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk
mengintepretasikan isi dari halaman.
1
Ekstensi HTM atau HTML?
Ketika anda menyimpan sebuah file HTML, anda dapat menggunakan ekstensi .htm
atau .html. Penggunaan ekstensi .htm merupakan kebiasaan dari masa lampau, ketika
perangkat lunak hanya diperbolehkan menggunakan tiga huruh dalam ekstensi file.
Editor
Untuk membuat atau mengedit file html, dapat menggunakan editor plain text (Notepad,
Gedit, Vim). Selain itu juga dapat menggunakan editor WYSIWYG (What you see is
what you get), seperti KompoZer atau DreamWeaver. Dalam praktikum sebaiknya
menggunakan vi atau vim dengan beberapa keunggulannya.
Struktur Dokumen (X)HTML

• Dokumen HTML memiliki sebuah kepala (head) dan badan (body). Kepala
dokumen (biasa disebut header) mengandung informasi deskriptif mengenai
dokumen itu sendiri, seperti judul, style sheet yang digunakan, script, dan
informasi meta lainnya.
<html>
<head>
<title> Judul di sini </title>
<body>
Isi halaman web di sini.
</body>
</html>
Struktur minimal dokumen (X)HTML):

1. Mengidentifikasi dokumen ditulis dalam HTML atau XHTML
2. Head memberikan informasi mengenai dokumen
3. Judul yang mendeskripsikan dokumen
4. Body mengandung isi yang ditampilkan pada browser.
Percobaan 1
Ketiklah teks di bawah ini ke dalam dokumen baru dan simpan dalam direktori
prakrtikum1 (jika belum ada, buat terlebih dahulu), beri nama index.html. Jaga agar
pergantian baris sama seperti contoh.
2
Apa yang Diabaikan Browser?
Beberapa informasi dalam dokumen sumber akan diabaikan ketika
dilihat dalam web browser, yaitu:
Pergantian baris.
Teks dan elemen akan disatukan secara kontinyu sampai blok
elemen baru, seperti heading (h1), paragraf (p) atau
pergantian baris(br)
Tab dan spasi lebih dari satu.
Jika dokumen mengandung:
tab, spasi dan spasi lagi
browser akan menampilkan:
Tag yang tidak dikenali.
Browser mungkin tidak menampilkan apa-apa, atau mungkin
menampilkan isi dalam tag sebagai teks biasa.
Teks dalam komentar.
Browser tidak akan menampilkan teks antara tag .
Percobaan 2
a. Buka dokumen yang telah dibuat pada percobaan 1.
b. Tambahkan tag <html> pada awal dokumen, dan tag </html> pada akhir dokumen.
c. Buat head dokumen yang mengandung judul halaman. Ketik <head> dan </head>
sebelum konten. Dalam elemen head tambahkan elemem title dan isi dengan judul,
“Hal-hal yang diabaikan browser”.
d. Tambahkan tag <body> pada awal konten dan </body> pada akhir konten.
e. Ketika selesai, dokumen sumber akan tampil seperti berikut:
<html>
<head>
<title> Hal-hal yang diabaikan browser</title>
</head>
<body>
Apa yang Diabaikan Browser?
Beberapa informasi dalam dokumen sumber akan diabaikan ketika
dilihat dalam web browser, yaitu:
Pergantian baris.
Teks dan elemen akan disatukan secara kontinyu sampai blok
elemen baru, seperti heading (h1), paragraf (p) atau
pergantian baris (br)
3
Tab dan spasi lebih dari satu.
Jika dokumen mengandung:
browser akan menampilkan:
Tag yang tidak dikenali.
Browser mungkin tidak menampilkan apa-apa, atau mungkin
menampilkan isi dalam tag sebagai teks biasa.
Teks dalam komentar.
</body>
</html>
f. Simpan file, dan buka di browser.
Percobaan 3, Mendefinisikan Elemen Teks

a. Buka dokumen hasil percobaan 2
b. Tambahkan tag <h1> pada awal dan </h1> pada akhir baris awal konten. Sehingga
tampak seperti ini
<h1> Apa yang Diabaikan Browser? <h1>
c. Halaman kita juga memiliki subjudul. Oleh karena itu kita tambahkan elemen heading
level 2 (h2), pada “Pergantian baris”, “Tab dan spasi lebih dari satu”, “Tag yang tidak
dikenali”, dan “Teks dalam komentar”.
<h2> Teks dalam komentar </h2>
c. Setiap elemen h2 diikuti oleh sebuah paragraf. Elemen paragraf diberikan tag <p>
<p> Beberapa informasi dalam dokumen sumber akan diabaikan
ketika dilihat dalam web browser, yaitu:</p>
Percobaan 4, Memberikan Komentar dan Menampilkan Tag pada

Halaman Web
a. Agar suatu teks (komentar) tidak muncul dalam browser, maka perlu ditambahkan tag
 pada akhir komentar. Ketik pada awal dokumen:

b. Suatu tag dapat ditampilkan dalam halaman web. Pada file sebelumnya, tertulis
seperti ini:
Ubahlah menjadi seperti baris berikut:
Browser tidak akan menampilkan teks antara tag .
Percobaan 5, Menambahkan Link dan Gambar
a. Untuk membuat link ke halaman lain menggunakan tag <a>. tambahkan baris berikut
di akhir dokumen:
<a href="http://www.w3schools.com">This is a link</a>
b. Untuk menambahkan gambar menggunakan tag <img>. Tambahkan baris berikut
pada awal dokumen.
<img src="gambar.jpg" width="104" height="142" />
5
BAB II
TEKS
POKOK BAHASAN:
• Building Blocks
• List
• Menambahkan Ganti Baris
• Inline text
• Elemen Umum (div dan span)
• Karakter Khusus
TUJUAN BELAJAR:
• Memahami elemen-elemen level blok untuk konten teks.
• Mengetahui jenis-jenis teks dalam dokumen (X)HTML
Building Block
Elemen level blok merupakan komponen utama struktur konten. Berikut ini elemen-
elemen level blok untuk konten teks.
Jenis Elemen
Heading h1,h2,h3,h4,h5,h6
Paragraf P
Block (long) quotes Blockquote
Preformated text pre
Elemen daftar (list) ol, ul, li, dl, dt, dd
Garis hr
Percobaan 1, Membuat Garis Horisontal dan Daftar (list)

a. Buatlah struktur dasar html dan masukkan teks di bawah ini ke dalam tag body dan
simpan dalam direktori prakrikum2 (jika belum ada, buat terlebih dahulu), beri nama
perc1.html.
<h3> Jenis Font </h3>
<hr />
<p> Berikut ini adalah contoh jenis-jenis font </p>
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Comic Sans</li>
<li>Arial</li>
6
</ul>
<br>
<h3> Jenis Format Font </h3>
<hr />
<p> Berikut ini adalah contoh jenis-jenis format font </p>
<ol start=”10”>
<li>Bold</li>
<li>Italic</li>
<li>Underline</li>
<li>Color</li>
</ol>
Jenis Tulisan
Ada tiga macam tipe penulisan yang paling sering digunakan dalam penulisan dokumen
apa saya. Yaitu tulisan tebal, tulisan miring dan tulisan garis bawah.
Elemen font berfungsi untuk mengubah jenis, ukuran dan warna dari tampilan huruf.
Atribut: color untuk mengubah warna huruf, face untuk mengubah jenis huruf (jika lebih
dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk mengubah ukuran
huruf (pixel).
Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing
color didefinisikan dalam dua digit hexadecimal number. Penentuan warna pada HTML
bisa dengan warna (dalam bahasa ingris) dan bisa pula dengan kode warna yang di
tulis dalam format heksa.
Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
(tulisan 0 adalah angka nol, bukan huruf O)
7
Percobaan 2. Jenis Tulisan
a. Buka file yg telah dibuat pada percobaan 1, simpan file dengan nama perc2.html.
Tambahkan tag untuk tipe penulisan berikut
<ol start=”10”>
<li><b>Bold</b></li>
<li><i>Italic</i></li>
<li><u>Underline</u></li>
<li><font color="fuchsia" size="+2"
face="verdana">Color</font></li>
</ol>
Percobaan 3, Notasi Khusus

Ada sejumlah notasi khusus untuk penulisan karakter-karakter tertentu, karakter ini
harus ditulis dengan notasi khusus karena dipakai juga sebagai kode-kode tag atau
memang tidak di jumpai dalam karakter teks ASCII. Diantaranya:
Simbol Notasi html

< (kurang dari) <
> (lebih dari) >
& (and) &
“ (petik ganda) "
± (plus minus) ±
© (copyright) ©
® (registered) ®
simpan dalam direktori praktikum2, beri nama perc3.html.
Kata-kata ini diantarai satu spasi<br>
Kata-kata    ini
      lima spasi <br><br>
notasi khusus lainnya seperti: <br>
lebih besar = <<br>
lebih kecil = ><br>
plus minus = ±
8
Percobaan 4, Quotation (kutipan)
Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu
blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks
tadi untuk memisahkan dari teks yang mengelilinginya.
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
</blockquote>
Percobaan 5, Subscript dan Superscript

Tag ini mempunyai fungsi untuk membuat sebuah huruf atau karakter berada sedikit
kebawah (sub) atau ke atas (sup) dari huruf atau karakter lainnya.
Contoh rumus molekul <br>

H<sub>2</sub>O<br>
FeCl<sub>3</sub><br>
CO<sub>2</sub><br><br>
Contoh persamaan kuadrat <br>
X <sup>2</sup> + Y <sup>2</sup> + X + Y + 1 = 0
Percobaan 6, Ukuran Font

simpan dalam direktori praktikum2, beri nama 6.html.
<font size="2">Teks ini mempunyai size=2x<br>

<font size="+2">Teks ini mempunyai size=+2<br>
9
Percobaan 7, Elemen Center
Elemen ini berfungsi untuk menampilkan teks dengan posisi horizontal di tengah.
simpan dalam direktori praktikum2, beri nama 7.html.
<CENTER>
Teks ini terletak di tengah layar web browser<br>
dengan menggunakan element CENTER
</right>
</body>
</CENTER>
10
BAB III
Hyperlink
POKOK BAHASAN:
• Atribut href
• Link ke Halaman di Web
• Link dalam Situs
• Mengarahkan ke Window Broser Baru
TUJUAN BELAJAR:
• Memahami konsep hyperlink
• Mengetahui atribut-atribut hyperlink
PENGERTIAN HYPERLINK
Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke
bagian lain dari dokumen web. Sebuah link biasanya ditandai dengan teks warna biru
bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. Untuk
membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan Anchor
tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan
untuk menentukan tujuan dari hyperlink tersebut.
Sintax anchor:
<a href=”URL”> Hypertext </a>
ATRIBUT HYPERLINK
Ada beberapa atribut yang digunakan oleh perintah ini antara lain
1. href - Atribut ini merupakan inti dari perintah <a> ini, isi atau content nya berupa
alamat link (URL) yang dituju. Misalkan Anda punya sebuah halaman web
dengan nama filenya adalah halaman2.html dan disimpan pada folder myweb,
maka penulisan nya menjadi href="myweb/halaman2.html".
2. target - Atribut ini digunakan untuk menyatakan target link dibuka pada halaman
yang sama, halaman yang lain dengan tidak menutup halaman yang
memanggilnya, atau pada sebuah frame tersendiri yang ditentukan. Bila atribut
target ini diisi dengan self, maka link yang dipanggil akan dibuka pada halaman
yang sama dengan link yang memanggilnya. Bila diisi dengan blank maka link
yang dipanggil akan dibuka pada halaman lain tanpa menutup halaman yang
memanggilnya. Sedangkan bila diinginkan dibuka pada sebuah frame maka
atribut target ini diisi dengan nama frame yang menjadi target
11
3. title - Atribut ini digunakan untuk memberi keterangan berupa sebuah teks atau
images yang akan ditampilkan bila kursor mendekati link ini. Jika image yang
ditampilkan untuk link, maka judul harus diganti dengan elemen img.
<a href=”poliwangi/ti.html”> <img src=”ti.gif” /> <a/>
Script umum:
<a href="url" name="name"
target="_blank"|"parent"|"_tolp"|"_self">
..........................
</a>
TUJUAN LINK DAN CARA PENULISAN LINK

Berdasarkan lokasi tujuannya, link dapat dibedakan atas:
1) Link yang menuju ke homepage (halaman pertama) dari sebuah situs
Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup
dituliskan alamat URL dari website tersebut, misalnya:
href="http://www.situs.com".
2) Link yang menuju ke halaman lain dalam situs lain, maka harus kita tuliskan
alamat URL dan lokasi filenya.
Misalnya: href="http://www.situs.com/sini/situ.html".
3) Link yang menuju ke halaman lain dalam situs yang sama, maka cukup dituliskan
lokasi filenya, tanpa menuliskan alamat URL situs itu. Dalam hal ini ada beberapa
kemungkinan:
a. Bila file tersebut berlokasi pada folder yang sama dengan file dari link
tersebut maka cukup dituliskan nama filenya, misalnya:
href="freeware1.html".
b. Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang
ditempati oleh link tersebut, maka harus dituliskan nama foldernya.
Misalnya: href="javascript/js001.html".
c. Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas
folder yang ditempati oleh file dari link tersebut maka dituliskan seperti
berikut: href="../rainbow.gif".
d. Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik
dua seperti ini: href="../../rainbow.gif" dan seterusnya.
4) Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama.
Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman web,
sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju itu
12
dengan mencantumkan tag <a name="bagian"></a> pada baris yang akan dituju
itu. Setelah itu barulah kita bisa membuat link yang menuju ke bagian tersebut.
Dalam hal ini ada dua kemungkinan.
a. Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link
tersebut maka cukup dituliskan nama lokasi yang dituju itu. Misalnya:
href=#bagian.
b. Bila tempat yang dituju itu terletak pada halaman yang lain maka harus
dituliskan nama file dari halaman itu baru nama tempatnya. Misalnya:
href="lain.html#bagian".
5) Link yang mengarah ke sebuah file tertentu yang tidak bisa ditampilkan atau
dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file
audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini diklik,
akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan
(save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai.
Proses pengambilan dan penyimpanan file semacam inilah yang dinamakan
download. Cara penulisannya sama saja caranya dengan file HTML seperti pada
point 2 dan 3 di atas.
6) Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela
pengiriman email dari program email yang terinstall pada komputer user
(misalnya Evolution Mail, Microsoft Outlook). Pada kotak tujuan email (To:) sudah
tercantum alamat email tujuan. Link yang berisi alamat email dituliskan seperti
berikut: href=""
Percobaan 1, Membuat struktur direktori dan halaman utama

a. Buatlah struktur direktori Web seperti berikut.
b. Buatlah file index.html, lengkapi struktur dasar htmlnya, dan simpan dalam direktori
poliwangi. Berikut ini adalah isi dari file tersebut:
<a href="index.html">Home</a>
c. Amati apa yang terjadi ketika link tersebut di klik.
13
Percobaan 2, Membuat link ke halaman lain dalam situs dan
direktori yang sama
a. Buatlah file info.html, lengkapi struktur dasar htmlnya, dan simpan dalam direktori
poliwangi.
b. Tambahkan baris berikut pada file index.html yang ada di direktori poliwangi dan
lengkapi isi href-nya.
<a href="______________">Info</a>
14
Percobaan 3, Membuat link ke halaman lain dalam situs yang direktorinya lebih
rendah
a. Tambahkan baris berikut pada file index.html yang ada di direktori poliwangi dan
<a href="______________">Prodi</a>
b. Buatlah file index.html, lengkapi struktur dasar htmlnya, dan simpan dalam direktori
prodi.
15
Percobaan 4, Membuat link ke halaman lain dalam situs yang
direktorinya lebih rendah dua tingkat
a. Tambahkan baris berikut pada file index.html yang ada di direktori poliwangi dan
<ul>
<li><a href="______________">Multimedia</a><li/>
<li><a href="______________">Rekayasa Perangkat
lunak</a><li/>
<li><a href="______________">Jaringan</a><li/>
<ul/>
b. Buatlah file multimedia.html, rpl.html, jaringan.html, dan lengkapi struktur dasar
htmlnya, dan simpan dalam direktori t_info.
16
Percobaan 5, Membuat link ke halaman lain dalam situs pada
direktori diatasnya
a. Tambahkan link pada file index.html yang berada di direktori prodi, yang mengarah ke
file index.html di direktori utama
<a href="______________">Home</a>
17
Percobaan 6, Membuat link ke halaman lain dalam situs pada direktori diatasnya
dua tingkat
a. Tambahkan link pada file multimedia.html, rpl.html, jaringan.html yang berada di
direktori t_info, yang mengarah ke file index.html di direktori utama
<a href="______________">Home</a>
Percobaan 7, Membuat link menggunakan image
18
a. Tambahkan gambar logo poliwangi pada file multimedia.html, rpl.html, jaringan.html
yang berada di direktori t_info, yang mengarah ke file index.html di direktori utama
<a href="__________">
<img src="poliwangi.jpg" width="104" height="142" />
</a>
Percobaan 8, Membuat link yang menuju ke bagian tertentu (bookmark) dalam

halaman yang sama.
a. Tambahkan baris berikut ke file info.html yang berada di direktori poliwangi:
<a href=”#deskripsi”> Deskripsi </a>
<a href=”#sejarah”> Sejarah </a>
<br>
<h1 id=”deskripsi”>Deskripsi</h1>
<br> Berikut ini adalah deskripsi poliwangi
.
.
.25x
<br>
<h1 id=”sejarah”>Sejarah</h1>
<br> Berikut ini adalah dsejarah poliwangi
19
.
.
.25x
<br>
<a href=”#deskripsi”> Deskripsi </a>
<a href=”#sejarah”> Sejarah </a>
Percobaan 9, Membuat link yang menuju ke bagian tertentu

(bookmark) dalam halaman yang berbeda
a. Tambahkan baris berikut ke file index.html yang berada di direktori poliwangi:
<br>
<a href=”info.html#deskripsi”> Deskripsi </a>
<a href=”info.html#sejarah”> Sejarah </a>
20
Gambar
POKOK BAHASAN:
• Elemen Gambar
• Imagemap
TUJUAN BELAJAR:
• Menambahkan gambar inline
• Menambahkan imagemap
Format Image
Format image yang dapat ditampilkan dalam web yaitu GIF, JPEG, atau PNG. Penulisan
ekstensi harus disesuaikan dengan format image, contoh .gif, .jpg (atau .jpeg), dan .png.
Jika anda ingin menampilkan format lainnya, anda harus mengkonversi terlebih dahulu
sebelum mengggunakannya. Jika ada alasan lain untuk menjaga format image, maka
anda dapat menggunakan sebagai link.
<a href=”gambar.bmp”> Get the image </a>
Elemen Image
<img /> XHTML
<img> HTML
Tag Image
sintaks:
<img
Align=”left”|”right”|”top”|”middle”|”bottom”
Alt=”text”
Border=”pixel”
Width=”pixel”|”%”
Height=”pixel”|”%”
Hspace=”pixel”
Vspace=”pixel”
Src=”uri”>
21
Keterangan:
1. Img : tag ini merupakan inti dari perintah untuk menampilkan image pada
halaman web
2. Src : atribut ini merupakan bagian dari tag yang berfungsi untuk
memberitahukan kepada browser tentang nama file image yang akan
ditampilkan serta lokasi dari file image itu berada. Lokasi file dapat
menggunakan alamat absolut atau alamat relatih (pengalamatan file
gambar sama dengan pengalamatan link).
3. Alt : atribut ini digunakan untuk memberikan keterangan terhadap images
tersebut. Dengan atribut ini kita bisa menyiapkan teks pengganti gambar
bila suatu waktu gambar - karena satu dan lain hal - tidak bisa
ditampilkan. Misalnya user menggunakan browser versi lama (yang belum
bisa menampilkan gambar) atau browser yang dimatikan fungsi penampil
gambarnya (untuk mempercepat proses loading). Dengan adanya atribut
ALT ini, tampilan gambar dapat digantikan dengan teks yang kita
masukkan di dalamnya.
4. Border : berfungsi untuk memberikan garis tepi yang besarnya dapat kita
tentukan dengan ukuran pixel.
5. Hspace : jarak kosong posisi horizontal
6. Vspace : jarak kosong posisi vertical
7) Height : untuk menentukan ukuran tinggi pada gambar yang akan
ditampilkan
8) Width : untuk menentukan ukuran lebar pada gambar
9) Align : mengatur posisi gambar
Tanpa atribut height dan width, browser akan menampilkan gambar sesuai
dengan ukuran gambar yang bersangkutan, tetapi kita juga bisa menentukannya
dengan menggunakan atribut tersebut. Selain menggunakan suatu pixel, kita bisa
mengatur ukuran tampilan gambar dalam browser dengan satuan persen. Umumnya
satuan persen ini digunakan untuk mengatur lebar (width) gambar, bukan tinggi gambar.
Sebab mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan
yang tidak konsisten karena akan bergantung pada lebar jendela browser serta setting
resolusi monitor. Atribut ini juga berfungsi untuk mempercepat tampilnya halaman web
(loading). Karena dengan adanya kedua atribut ini, secara teknis memerintahkan
browser untuk menyediakan tempat seukuran itu sebelum gambarnya sendiri selesai di-
load. Jadi bila kita ingin menampilkan sebuah gambar sama dengan ukuran aslinya,
alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan angka
yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.
22
Percobaan 1. Inline Image
a. Tuliskan baris berikut dan lengkapi struktur dasarnya. Simpan dalam file
percobaan1.html
<p>
Saya kuliah di POLIWANGI <img src=”poliwangi.png” /> sejak
tahun 2009
</p>
Percobaan 2. Alternatif
percobaan2.html
<p>
Saya kuliah di POLIWANGI <img src="oliwangi.jpg"
alt="“ Maaf gambar tidak ditemukan ”" /> sejak
tahun 2009
</p>
Percobaan 3. Dimensi tinggi dan lebar

percobaan3.html
<p>
<img src=”poliwangi.png”
alt="“ Maaf gambar tidak ditemukan ”"
width=”25” height=”25” />
logo kecil
</p><br>
<p>
<img src=:”poliwangi.png”
logo sedang
</p><br>
<p>
<img src=:”poliwangi.png”
logo besar
</p><br>
Percobaan 4. Aligment image

23
percobaan4.html
<p>
Sebuah gambar
<img src="hackanm.gif"
align="bottom" width="48" height="48">
dalam teks
</p>
<p>
Sebuah gambar
<img src ="hackanm.gif"
align="middle" width="48" height="48">
dalam teks
</p>
<p>
Sebuah gambar
align="top" width="48" height="48">
dalam teks
</p>
<p>
Perhatikan bahwa bottom alignment adalah default alignment
</p>
<p>
Sebuah gambar
width="48" height="48">
dalam teks
</p>
<p>
Sebuah gambar sebelum teks
</p>
24
<p>
Sebuah gambar sebelum teks
</p>
Percobaan 5. Float image

percobaan5.html
<p>
<img src="poliwangi.png"
width="100" height="100" hspace="10" vspace="5"
align="left">
Sebuah paragraf yang berisi image. atribut align image diisi
dengan "left". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "left". Sebuah
paragraf yang berisi image. atribut align image diisi dengan
"left". Sebuah paragraf yang berisi image. atribut
align image diisi dengan "left".
</p>
<p>
<img src="poliwangi.png"
width="100" height="100" hspace="10" vspace="5"
align="right">
Sebuah paragraf yang berisi image. atribut align image diisi
dengan "right". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "right".Sebuah
"right". Sebuah paragraf yang berisi image.
atribut align image diisi dengan quot;right". Sebuah
"right".
</p>
25
Percobaan 6. Image map
percobaan6.html
<p>
Klik pada salah satu benda langit untuk melihat lebih dekat:
</p>
<img src="planets.gif" width="145" height="126"
usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.html">
<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.html">
<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.html">
</map>
<p><b>Note:</b>
The "usemap" attribute in the img element refers to the "id"
or "name" (browser dependant) attribute in the map element,
therefore we have added both the "id" and "name" attributes
to the map element.
</p>
b. Untuk melengkapi kode diatas, buatlah file sun.html yang menampilkan gambar
sun.gif, file mercur.html yang menampilkan gambar merglobe.gif, dan file venus.html
yang menampilkan gambar venglobe.gif.
26
PERTEMUAN V
Tabel
POKOK BAHASAN:
• Struktur Tabel
• Header Tabel
• Spanning cell
• Cell Padding and spacing
• Caption
• Aksesabilitas Tabel
• Wrapping Up Tabel
TUJUAN BELAJAR:
• Mengetahui elemen-elemen tabel
• Membuat tabel
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan
tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris.
Element table berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom
dan baris. Table digunakan untuk penempatan obyek-obyek yang dibutuhkan dalam
web.
Struktur Tabel Minimal
Tampilan di browser
Markup tabel
27
Tag table
Perintah-perintah yang digunakan untuk membuat table dalam html antara lain:
1. <table> : tag ini merupakan inti dari perintah untuk membuat table pada
dokumen HTML
2. </table> : tag ini merupakan penutup dari perintah untuk membuat table
pada dokumen
3. <thead> : tag ini digunakan untuk menandakan bahwa table yang
digunakan untuk menandalan bahwa table yang dibuat adalah header atau
bagian paling atas dari sebuah table dan dituliskan setelah tag <table> dan
harus ditutup dengan </thead>
4. <tbody> : tag ini dugunakan untuk menandakan bahwa table yang dibuat
adalah body atau badan dari suatu table. Penulisannya sama dengan <thead>
dan harus ditutup dengan perintah </tbody>
5. <tfoof> : tag ini biasanya digunakan untuk menandakan bahwa table yang
dibuat adalah FOOTER atau bagian akhir dari suatu table, bisa juga merupakan
sebuah penutup dari suatu table dan dituliskan setelah tag <table> kemudian
harus ditutup dengan perintah </tfoot>
6. <tr> : Tag ini digunakan untuk membuat KOLOM pada suatu tabel, dan
merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus
setelah Tag ini. Setiap perpindahan KOLOM harus ditutup dengan perintah </tr>
7. <td> : Tag ini digunakan untuk membuat KOLOM pada suatu tabel, dan
merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus
setelah Tag ini. Setiap perpindahan KOLOM harus ditutup dengan perintah
</td>
8. <th> : Tag ini fungsinya hampir sama dengan tag <td> hanya bila kita
menggunakan tag ini, maka border (garis luar) dari tabel tidak ditampilkan, dan
karakter yang ada dalam perintah ini akan di anggap Header sehingga hurufnya
menjadi agak besar dan dicetak tebal oleh browser. Tag ini merupakan bagian
dari tag <tr>, penulisan nya pun harus sesudah tag <tr>. Atribut dari tag ini
adalah : scope dengan value nya col untuk KOLOM dan row untuk BARIS
28
Percobaan 1. Struktur Tabel
a. Tuliskan baris kode berikut dan simpan dalam file percobaan1.html
<html>
<head>
<title>Latihan tabel1</title>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr>
<td colspan="3" align="center">Ini adalah bagian HEADER dari
TABEL
</td>
</tr>
</thead>
<tbody>
<tr>
<td>BARIS ke 1 KOLOM ke 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">Ini adalah bagian FOOTER dari
TABEL
</td>
</tr>
29
</tfoot>
</table>
</body>
</html>
Tampilan
ATRIBUT TABEL
Atribut tabel ini penting untuk mengatur tampilan di browser yang merupakan sebuah
tabel yang majemuk. beberapa atribut tabel antara lain :
1) Cellpadding - Atribut ini dipakai untuk menentukan besarnya jarak bagian dalam
(cell) dengan bagian luar (border) dari sebuah tabel. contoh : cellpadding="2"
Cellspacing - Atribut ini dipakai untuk menentukan besarnya jarak cell yang satu
dengan cell yang lainnya. contoh : cellspacing="5"
2. Border - Atribut ini dipakai untuk menentukan besarnya border (bingkai) dari
sebuah tabel. contoh : border="2"
3. Width - Atribut ini digunakan untuk menentukan lebar dari sebuah tabel, ukuran
ini bisa menggunakan satuan pixel atau persentasi. contoh : width="75%",
width="100%", width="800", width="200"
4. Bordercolor - Atribut ini digunakan untuk menentukan warna border atau garis
tepi dari sebuah tabel. contoh : bordercolor="black"
5. Bgcolor - Atribut ini digunakan untuk menentukan warna latar dari sebuah tabel
atau cell. contoh : bgcolor="#FFFFFF", bgcolor="#000000", bgcolor="blue",
bgcolor="red"
6. Valign - Atribut ini digunakan untuk menentukan posisi Vertikal objek dari sebuah
tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalam perintah
pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa pilihan posisi yaitu :
a) top - pilihan ini akan menempatkan objek berada pada posisi teratas dari
cell.
b) middle - pilihan ini akan menempatkan objek berada pada tengah cell.
30
c) bottom - pilihan ini akan menempatkan objek berada pada bagian bawah
dari cell.
Contoh : <tr valign="top">, <tr valign="middle">, <tr valign="bottom">
7. Align - Atribut ini digunakan untuk menentukan posisi Horizontal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalan
perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya beberapa
pilihan yaitu :
a) left - pilihan ini akan menempatkan objek berada pada bagian kiri dari cell,
bila objek berbentuk teks maka teks tersebut akan dijadikan rata kiri.
b) center - pilihan ini akan menempatkan objek berada pada bagian tengan
dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata
tengah.
c) right - pilihan ini akan menempatkan objek berada pada bagian kanan dari
cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata
kanan.
Contoh : <td align="left">, <td align="center">, <td align="right">.
8. Rowspan - Atribut ini digunakan untuk menyatukan dua buah baris tabel menjadi
satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan
kolom dari tabel / <td>
9. Colspan - Atribut ini digunakan untuk menyatukan dua buah kolom tabel menjadi
satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan
kolom dari tabel / <td>
Contoh : <td rowspan="2">, <td colspan="2">
PENJELASAN MODEL TABEL

Perhatikan gambar dibawah ini yang merupakan tabel yang mempunya 3 buah
kolom dan 4 buah baris ( 3 X 4 ).
31
Gambar 7.2 contoh bentuk tabel
Keterangan mengenai atribut dari sebuah tabel.

1) Garis yang berwarna hitam dan berada paling luar itu disebut border.
2) Jarak Antara garis merah dan hitam itu disebut padding.
3) Bidang yang berwarna biru langit, abu-abu dan hijau itu disebut cell.
4) Jarak antara cell yang satu dengan cell yang lainnya itu disebut cellspacing.
5) Cell yang diberi warna hijau merupakan gabungan dari dua buah cell atau lebih
dalam satu kolom (merger) disebut dengan colspan dan dihasilkan dari perintah
colspan
6) Cell yang diberi warna abu-abu merupakan gabungan dari dua buah cell atau
lebih dalam satu baris (merger) disebut dengan rowspan dan dihasilkan dari
perintah rowspan
Percobaan 2. Penataan Tabel

<html>
<head>
<title>Latihan tabel 2</title>
</head>
<body>
<table width="300" cellpadding="5" cellspacing="1"
border="5" bordercolor="red">
<tr>
<td align="center">Kolom 1 baris 1</td>
</tr>
<tr>
<td colspan="2" bgcolor="silver" align="center">
Gabungan Kolom 3 dan 4 baris ke 2</td>
</tr>
<tr>
<td rowspan="2" bgcolor="silver" align="center">
Gabungan baris 3 dan 4 kolom ke 1</td>
32
<td align="center">kolom 2 baris 3</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Tampilan
Percobaan 3. Penataan Isi Tabel dan Pewarnaan Latar

<HTML>
<head>
<title>align table</title>
</head>
<BODY>
<TABLE WIDTH=400 BORDER=1>
<TR BGCOLOR="yellow">
<TH AlIGN="left">Money Spent on...</TH>
<TH ALIGN="right">January</TH>
<TH ALIGN="right">FEBRUARY</TH>
</TR>
<TR>
<TD ALIGN="left">Clothes</TD>
<TD ALIGN="right">$241.10</TD>
33
</TR>
<TR>
<TD ALIGN="left">Make-Up</TD>
</TR>
<TR>
<TD ALIGN="left">Food</TD>
</TR>
<TR>
<TH ALIGN="left">Sum</TH>
<TH ALIGN="right">$1001.50</TH>
<TH ALIGN="right">$744.65</TH>
</TR>
</TABLE>
</BODY>
</HTML>
Tampilan
Percobaan 4. Penggabungan Isi Sel (merge)

<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="3"
WIDTH="100%">
<TR BGCOLOR=”yellow”
ALIGN="center"><TD>No</TD><TD>Nama</TD><TD>Alamat</TD></TR>
34
<TR><TD>1</TD><TD>Faisal</TD><TD>Bandung</TD></TR>
<TR><TD>2</TD><TD>Ade</TD><TD>Jakarta</TD></TR>
<TR><TD>3</TD><TD>Herry</TD><TD>Cimahi</TD></TR>
<TR><TD>4</TD><TD COLSPAN=”2” BGCOLOR=”green”>Nama & Alamat
digabung</TD><TR>
</TABLE>
</BODY>
</HTML>
Tampilan
Percobaan 5. Pengaturan Paragraf dan Tabel dalam Tabel

<HTML>
<head>
<title> variasi tabel</title>
</head>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>
<P>This is first paragraph</P>
<P>This is second paragraph</P>
</TD>
<TD>This Cell cotanins a Table:
<TABLE BORDER=1>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
35
</TABLE>
</TD>
</TR>
<TR>
<TD>This Cell contains a list:
<UL>
<LI>Apel</LI>
<LI>Pisang</LI>
<LI>Nanas</LI>
</UL>
</TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tampilan
Percobaan 6. Menyisipkan Gambar dalam Sel

<HTML>
<head>
<title>image tabel</title>
</head>
<BODY>
<table border=”1">
<tr>
<td>
<img border="0" src="images/sailin10.gif">
36
</td>
<td><b>MUNGKINKAH…?</b>
<br/>
Kalo kita sekarang sepakat bilang bahwa “Nenek moyang” kita
adalah pelaut…! Bisa jadi cucu-cucu kita kelak bakal sepakat
bilang bahwa “Nenek Moyang” kita adalah BLOGGER :)
Mungkinkah…?</td>
</BODY>
</HTML>
Tampilan
37
BAB VI
Cascading Style Sheet (CSS) 3

& HTML 5
POKOK BAHASAN:
• Penulisan CSS
• Menempelkan style ke dokumen X(HTML)
• Layout Halaman Web
TUJUAN BELAJAR:
• Mengetahui cara kerja, dan atribut CSS
• Membuat Layout Halaman Web
Pengertian CSS
Cascading Style Sheets (CSS) adalah mekanisme sederhana untuk
menambahkan gaya (misal huruf, warna, spasi) ke dalam dokumen web, Tujuannya
adalah untuk memisahkan struktur dari gaya, sehingga pada saat kita menulis HTML
tidak perlu kita memikirkan bagaimana gaya dari dokumen tersebut. Gaya tampilan dari
dokumen akan ditangani oleh CSS. CSS sangat berperan dalam meningkatkan tampilan
dari web. sebelum adanya CSS, website yang ada di internet benar-benar plain dan
membosankan. Sekarang, berkat CSS, kita bisa otak-atik tampilan web kita sesuai
dengan yang kita inginkan. Keuntungan menggunakan Style Sheet : pemformatan
tambahan, kontrol yang lebih baik, dan perubahan yang lebih mudah.
Jenis Pengaturan CSS

Pengaturan CSS ada tiga jenis, setiap jenis memiliki penggunaan tertentu:
 HTML selector
Selector HTML diwakili oleh nama tag. Sebagai contoh h1 merupakan selector untuk
tag <h1>. Selector digunakan untuk mendefinisikan bagaimana tag ditampilkan.

Contoh:
h1 { color: red; }
akan mengubah:
<h1>....</h1>
 Class
38
Class merupakan merupakan penamaan sejumlah tag yang memiliki properties yang
sama. Anda dapat memberi nama apapun pada kelas.
Contoh:
.myClass { font: bold 1.25em times; }
akan mengubah:
<h1 class=”myClass”>......<h1>
<div class=”myClass”>......</div>
 ID
Hampir sama dengan selektor class, pngaturan dengan ID dapat diaplikasikan ke tag
HTML. Akan tetapi ID hnya bisa diaplikasikan ke satu tag, berbeda dengan class
yang bisa diaplikasikan ke beberapa tag sekaligus.
Contoh:
#myObject1 { position: absolute; top: 10px; }
akan mengubah:
<h1 id=”myObject”> …. </h1>
Penulisan CSS
Struktur CSS terdiri dari tiga bagian, selector, property dan value.
selector{
property1: value;
property2: value;
…......
}
Selector dapat ditentukan dengan selektor html, class atau ID. Property mendefinisikan
sifat yang akan diaplikasikan ke selector. Value diisi sesuai dengan property yang
digunakan.
Contoh:
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif
}
Dukungan Browser Terhadap CSS

CSS telah mengalami evolusi, mulai dari CSS1, CSS2, CSS2.1 dan yang saat ini adalah
CSS3. Saat ini versi sebelum CSS3 sudah didukung banyak banyak browser pada
umumnya. Akan tetapi untuk CSS3, hanya beberapa browser terbaru saja yang
mendukungnya.
Untuk dapat menggunakan CSS3 pada berbagai browser, kita diharuskan
menggunakan ekstensi khusus yang ditambahkan di awal property CSS.
39
Tabel Ekstensi Browser
Contoh penulisan
Cara penggunaan css

Style Sheet dapat digunakan dengan 3 cara, yaitu:
1. Inline Styles
Inline styles menambahkan attribute style kedalam tag XHTML-nya
Berlaku hanya pada tag dimana style ditambahkan.
Percobaan 1 – Inline Styles
Simpan kode berikut dengan nama inlinestyle.html
<html>
<body>
<p style="font-size: 25pt; font-weight:bold; font-
style:italic; color:red;">
By adding inline CSS styling to this paragraph, we can
override the default styles.
</p>
</body>
</html>
Gambar 11.1 contoh inlinestyle.css
40
2. Embedded Styles
Diletakkan di awal dokumen, di antara tag-tag <HTML> dan <BODY>.
Untuk menyisipkan (embed) Style Sheet, tambahkan blok <STYLE> </STYLE> pada
tag <head>
Berlaku hanya untuk halaman dimana style didefinisikan!
Percobaan 2– Embedded Styles

Simpan kode berikut dengan nama file embeddedstyle.html
<html>
<head>
<style>
p { color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam
header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada
diantara <p>dan</p>akan memiliki format yang sama</p>
</body>
</html>
41
Gambar 11.2 contoh embeddedstyle.html
3. Linked styles / External Styles

Diletakan diluar dokumen XHTML nya (terpisah dari dokumen html). Menggunakan
property <link> untuk menghubungkan halaman XHTML dengan file .CSS nya. Untuk
menghubungkan dokumen html dengan CSS tersebut cukup menambahakan code
berikut ini ke header dokumen html
<link rel="stylesheet" href="style.css" type="text/css">
Perintah rel perlu diatur dengan pernyataan "stylesheet" agar supaya browser dapat
menemukan perintah href sebagai penunjukan ke alamat Web (URL) sheet anda.
Sebagai catatan, komentar dapat dimasukkan didalam blok komentar /* dan */
Percobaan 3 – External CSS

Tulis Kode berikut dengan nama file externalcss.html:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Hello World !</h1>
<p>Hello Juga</p>
</body>
</body>
</html>
Kode CCS berikut ini harus di simpan ke folder yang sama dengan “externalcss.html”
dengan nama “style.css”
h1 {
font-size: 16pt;
font-weight:bold;
}
p {
color:blue;
}
42
Gambar 11.3 contoh externalcss.html
HTML5
HTML5 merupakan standar yang masih dalam tahap pengembangan. Dengan HTML5
struktur dokumen akan lebih sederhana. Kita dapat mengkhususkan elemen-elemen
umum seperti header, footer, articles, dan asides. Berikut ini adalah struktur umum
dokumen HTML5.
 <header> dapat digunakan untuk judul halaman, judul bagian, judul artikel.
 <nav> dapat dimasukkan ke dalam header atau footer, atau dipasang secara
independen.
 <section> mendefinisikan bagian utama dari sebuah halaman.
 <article>dapat digunakan untuk mengisi artikel.
 <figure> dapat diisi dengan image, audio atau video yang ditempel pada halaman.
 <dialog>digunakan untuk menyimpan transkrip pembicaraan.
 <aside>digunakan untuk mendukung konten sebuah halaman, sperti link yang
berhubungan, navigasi sekunder, atau untuk iklan.
 <footer> mirip dengan header dan diletakkan pada dasar di bawah elemen lain.
Percobaan 4 – Struktur Dasar HTML5

Simpan dokumen berikut dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="utama.css" type="text/css"
media="screen">
</head>
<body>
<header>
<h1>The Blog</h1>
</header>
<nav>
43
menu1 menu2 menu3 menu4 menu5 menu6
</nav>
<section id="intro">
<h2>Judul Intro</h2>
<p>Berisi deskripsi Intro</p>
</section>
<div id="content">
<div id="mainContent">
<h2>This is the title of a blog post</h2>
<p>This is the title of a blog post
This is the title of a blog post
</p>
</div>
<aside>
<h3>Categories</h3>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet consectetur</a></li>
</ul>
</aside>
</div>
<footer>
<h3>Footer</h3>
</footer>
</body></html>
Percobaan 5 – Mengatur Posisi Komponen Halaman

Berikut ini adalah layout yang diharapkan
1. Simpanlah dokumen CSS berikut dengan nama utama.css pada direktori/folder yang
44
sama dengan file hasil percobaan 4.
/* Reset koordinat CSS */
* {
margin: 0;
padding: 0;
}
/* Beritahu browser agar merender elemen HTML 5 sebagai

blok */
header, footer, section, aside, nav, article {
display: block;
}
body {
margin: 0 auto;
padding: 22px 0;
width: 940px;
background: #F0F0F0;
}
nav {
position: absolute;
left: 0;
width: 100%;
background: red;
}
#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612;
/* membuat sudut tumpul */

-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
background: grey;
}
aside {
display: table-cell;
width: 300px;
background: yellow top left;
}
footer {
position: absolute;
left: 0;
width: 100%;
45
padding: 44px 0;
background: #222;
}
2. Kemudian buatlah link CSS pada dokumen index.html(hasil percobaan4) dengan file
style.css (gunakan teknik seperti percobaan 3).
46
BAB VII
Warna dan Latar Belakang
POKOK BAHASAN:
• Penamaan warna dalam CSS
• Warna foreground dan background
• Selektor Pseudoclass dan pseudoelement
• Tiling background image
• Style sheet eksternal
TUJUAN BELAJAR:
• Menggunakan warna di CSS untuk pengaturan background
Spesifikasi Nilai Warna

Terdapat dua cara untuk menentukan warna dalam style sheet:
• Predefined color
color: red; color: olive; color:blue;
• Numerik value
color: #FF0000; color: #808000; color: #00F;
Nama-nama warna
Dalam CSS 2.1 terdapat 17 nama warna yg berbeda.
47
Menulis Nilai RGB dalam CSS
Terdapat empat format penulisan nilai RGB dalam CSS:
• color: rgb (255, 255, 255)
• color: rgb (100%, 100%, 100%)
• color: #FFFFFF
• color: #FFF
Contoh penulisan format di atas berwarna putih.
Warna Foreground dan background

Foreground dari suatu elemen meliputi teks dan border. Anda dapat menentukan warna
foreground dengan properti color.
color
Values: nama atau nila warna | inherit
Default: tergantung pada browser dan seting user
Applies to: semua elemen
Inherits: ya
Percobaan1 Warna background

Buatlah dokumen html dengan style dan markup berikut:
style:
blockquote {
border: 4px dashed;
color: #508C19;
background-color: #B4DBE6;
}
markup:
<blockquote>
<p>I'd recommend Honey Gold cereal to anyone who likes cereal.
It's the <em>only</em> way to start the day!.</p>
<cite>— Jennifer Robbins, happy consumer</cite>
</blockquote>
Pseudoelement Selectors
Terdapat empat macam pseudoelements yang diindikasikan dengan simbol colon (:).
Pseudoelements tidak didukung oleh Internet Explorer termasuk IE 7, akan tetapi
didukung oleh semua browser modern.
48
First letter and line
Dua pseudoelement berbasis pada konteks dan digunakan untuk memilih huruf pertama
atau baris pertama dari sebuah elemen teks.
:first-line
Selektor ini mengaplikasikan style ke baris pertama dari elemen yg telah ditentukan. Berikut ini properti
yang bisa diaplikasikan:
color font background
word-spacing letter-spacing text-decoration
vertical-align text-transform line-height
:first-letter
Selektor ini mengaplikasikan style ke huruf pertama dari elemen yg telah ditentukan. Berikut ini
properti yang bisa diaplikasikan:
color font text-decoration
text-transform vertical-align text-transform
background margin padding
border float
letter-spacing (CSS2.1) word-spacing (CSS2.1)
Berikut ini contoh dari pseudoelement
Percobaan 2 Pseudoelement
Buatlah dokumen html dengan style dan markup berikut:
style:
p:before {
content: "Once upon a time: ";
font-weight: bold;
color: purple;
}
p:after {
content: " The End.";
font-weight: bold;
color: purple;
49
}
markup:
<p>Snow White was banished for being the most
beautiful, ... and they lived happily ever after.
</p>
Background Images
Properti yang berhubungan dengan background image:
background-image
background-repeat
background-position
background-attachment
background
Menambahkan background image

background-image
Values: URL (location of image) | none | inherit
Default: none
Applies to: all elements
Inherits: no
Alamat URL yang dituliskan bersifat relatif terhadap dokumen html, bukan dokumen css.
Pada contoh dan gambar berikut ini, menunjukkan background images yang
diaplikasikan terhadap keseluruhan halaman (body) and a elemen tunggal blockquote
dengan dilengkapi padding dan border.
body {
background-image: url(star.gif); }
blockquote {
background-image: url(dot.gif);
padding: 2em;
border: 4px dashed;}
50
Percobaan 3 Menambahkan background image
1. Bukalah dokumen cabbage.html
2. Tambahkan style berikut
body {
background-image: url(cabbage_A.jpg)
}
Background Tiling
Background tiling digunakan untuk membuat pola perulangan dari suatu gambar.
Berikut ini properti yang bisa digunakan pada background-repeat:
background-repeat
Values: repeat | repeat-x | repeat-y | no-repeat | inherit
Default: repeat
Inherits: no
Jika anda menginginkan background image hanya muncul satu kali, gunakan kata
kuncino-repeat seperti berikut
body {
background-image: url(star.gif);
background-repeat: no-repeat;
}
Kita juga dapat membatasi gambar agar diulang secara horisontal (repeat-x) atau
secara vertikal (repeat-y) seperti contoh berikut.
body {
background-repeat: repeat-x;
}
body {
background-repeat: repeat-y;
}
51
Percobaan 3 Pengulangan background image
1. Hapus deklarasi background-image dalam style.
body {
background-image: url(cabbage_A.jpg)
}
2. Dalam div#titlepage, tambahkan gambar cabbage_B.gif dan set agar terjadi
perulangan secara horisontal.
div#titlepage {
padding: 1em;
background-color: #D4F8B9;
background-image: url(cabbage_B.gif);
background-repeat: repeat-x;
}
Posisi Background image

Properti background-position digunakan untuk menentukan letak gambar pada
background.Berikut ini properti dan nilainya:
background-position
Values: length measurement | percentage | left | center | right | top | bottom | inherit
Default: 0% 0% (same as left top)
Inherits: no
Percobaan 3 Posisi Background image

1. Letakkan sebuah gambar (tidak diulang), di pojok kiri atas halaman. Gunakan image
dengan nama file.
Style:
body {
margin-left: 10%;
margin-right: 10%;
background-color: #BBE09F;
background-image: url(cabbage_C_topleft.gif);
52
background-position: left top;
}
2. Ganti gambar pada elemen titlepage dengan file cabbage_C.gif dan ubahlah
posisi gambar agar ke tengah 75px.
Style:
div#titlepage {
padding: 1em;
background-image: url(cabbage_C.gif);
background-position: center 75px; }
Background attachment
Dalam percobaan sebelumnya, jika kita melakukan scroll halaman, maka background
image akan ikut bergeser. Kita dapat menggunakan properti background-attachment
agar gambar tetap pada posisinya ketika di-scroll.
background-attachment
Values: scroll | fixed | inherit
Default: scroll
Inherits: no
Percobaan 4 Background Attachment

1. Ubah agar background image pada body agar tidak bergeser. Berikut ini adalah style
dari body:
body {margin-left: 10%;
margin-right: 10%;
background-color: #BBE09F;
background-image: url(cabbage_C.gif);
background-position: center 85px;
background-attachment: fixed;
}
2. Ubah agar background image pada div agar tidak bergeser. Berikut ini adalah style
dari div:
div#titlepage {
53
padding: 1em;
background-image: url(cabbage_D.gif);
background-position: center 75px;
}
Shorthand background Property

Kita dapat menggunakan perintah yang lebih pendek untuk mengaplikasikan properti
background.
background
Values: background-color background-image background-repeat background-
attachment background
position| inherit
Default: see indiviual properties
Inherits: no
Contoh
Berikut ini adalah perintah yang panjang:
body {
background-color: black;
background-image: url(arlo.jpg);
background-position: right top;
}
Perintah di atas dapat dituliskan seperti berikut:

body { background: black url(arlo.jpg) no-repeat right top fixed;
}
Percobaan 4 Background Attachment

1. Ubah agar semua style ditulis dalam format yang lebih ringkas
2. Ubahlah style sheet embeded yang telah anda buat menjadi eksternal style sheet
54
BAB VIII
TEKSTUR
POKOK BAHASAN:
• Pola
• Efek bayangan
TUJUAN BELAJAR:
• Membuat pola dengan image CSS3
• Membuat efek bayangan dengan CSS3 dan HTML5
BOX-SHADOW (Efek Bayangan)

Propertis box-shadow memungkinkan desainer dapat dengan mudah
mengimplementasikan beberapa efek bayangan (sisi luar dan dalam) pada sebuah
elemen kotak, menentukan warna ukuran, blurr dan offset.
Saat ini browser yang didukung adalah Mozilla (Firefox), Webkit
(Safari/Chrome/Konqueror), Opera dan the IE9. Walaupun untuk Mozilla dan Webkit
masih membutuhkan awalan -moz- dan -webkit- (catatan: Mozilla Firefox 4.0+ tidak lagi
membutuhkan awalan -moz- prefix).
Contoh:
kode css:
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
Box-shadow property dapat menerima daftar bayangan yang dipisahkan

dengan koma, setiap bayangan didefinisikan nilainya yang terdiri dari batas
horisontal, batas vertikal, jarak blur, jarak penyebaran bayangan, nilai warna
dan 'inset (untuk bayangan sisi dalam secara default berada di luar box)
55
Examples:
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;
Membuat Drop Shadow Dasar

Berikut ini diagram yang diambil dari W3C:
Percobaan 1 Membuat bayangan sisi luar.

1. Tuliskan dokumen berikut:
<!DOCTYPE html>
<style>
#box{
width:580px;
height:180px;
border-radius:5px 5px;
margin-right: 20px;
padding-bottom: 40px;
padding-left: 20px;
padding-top: 20px;
}
#A{
width:150px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
background-color: #EEEEEE;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
#B{
width:150px;
float: left;
56
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
#C{
width:150px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}
#D{
width:150px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#E{
width:150px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
#F{
width:150px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
</style>
57
<div id="box">
<div id="A">
A
</div>
<div id="B">
B
</div>
<div id="C">
C
</div>
<div id="D">
D
</div>
<div id="E">
E
</div>
<div id="F">
F
</div>
</div>
Hasil yang diharapkan:
Percobaan 2 Membuat bayangan sisi dalam

1. Buatlah 6 (enam) box/kotak menggunakan div dan css, dengan id 'G', 'H', 'I', 'J',
'K', dan 'L'. Setiap kotak diset dengan lebar 150px dan tinggi 65px (mirip dengan
percobaan 1).
2. Pada kotak G tambahkan properti berikut:
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;;
3. Pada kotak H tambahkan properti berikut:
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
4. Pada kotak I tambahkan properti berikut:
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
58
box-shadow: inset -5px -5px 0 5px #888;
5. Pada kotak J tambahkan properti berikut:
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
6. Pada kotak K tambahkan properti berikut:
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inset 0 0 5px #888;
7. Pada kotak L tambahkan properti berikut:
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
Percobaan 3 Membuat banyak bayangan

1. Buatlah 1 (satu) box/kotak menggunakan div dan css, dengan id 'M'. Kotak diset
dengan lebar 100px dan tinggi 50px.
2. Pada kotak M tambahkan properti berikut:
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,
-40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,
-40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px
30px yellow, -40px -30px 50px blue;
59
Percobaan 4 Membuat bayangan dengan efek transparan
1. Tuliskan dokumen berikut:
<!DOCTYPE html>
<style>
#box{
display: table;
width:580px;
height:110px;
background-image:url(background_veneer.png);
margin-right: 20px;
padding-bottom: 40px;
padding-left: 20px;
padding-top: 20px;
border-radius:5px 5px;
}
#N{
width:150px;
height:50px;
float: left;
height: 65px;
margin-right: 40px;
margin-top: 20px;
text-align: center;
box-shadow: 5px 5px #000000;
}
#O{
width: 150px;
height: 65px;
float: left;
margin-right: 40px;
margin-top: 20px;
text-align: center;
box-shadow: 5px 5px rgba(0, 0, 0, 0.7);
}
#P{
width: 150px;
float: left;
height: 65px;
margin-top: 20px;
text-align: center;
box-shadow: 5px 5px rgba(0, 0, 0, 0.5);
}
</style>
<div id="box">
<div id="N">
N
</div>
<div id="O">
O
</div>
60
<div id="P">
P
</div>
</div>
Percobaan 5 Membuat bayangan dengan border-radius

1. Buatlah 2 (dua) box/kotak menggunakan div dan css, dengan id 'Q' dan 'R'.
Setiap kotak diset dengan lebar 150px dan tinggi 65px (mirip dengan percobaan
2. Pada kotak Q tambahkan properti berikut:
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
3. Pada kotak R tambahkan properti berikut:
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
61
BAB IX
Format Teks
POKOK BAHASAN:
• Property Teks
• Warna Teks
• Pengaturan teks (line height, indent, alligment)
• Spacing
TUJUAN BELAJAR:
• Mengaplikasikan text style CSS ke dokumen X(HTML)
Font Properties
Pada pertemuan kali ini, kita akan menggunakan file menu_summer.html sebagai bahan
untuk praktikum. Kita akan melakukan beberapa perbaikan pada file tersebut.
Gambar sebelum dan sesudah file menu_summer.html
Percobaan 1. Memformat sebuah menu.

1. Bukalah file menu_summer.html yang telah dicopy di web browser utuk melihat
tampilan awal dari halaman tersebut.
2. Buka file tersebut menggunakan teks editor dan simpan dengan nama
menu_summer_edit.html
3. Untuk mengaplikasikan css, perlu kita buat elemen style terlebih dahulu, seperti
berikut:
<head>
62
<title>Black Goose Bistro Summer Menu</title>
<style>
</style>
</head>
4. Ubahlah jenis teks dari halaman yang ditampilkan dengan jenis teks Verdana
atau sans-serif.
<style>

</style>
5. Ubahlah body teks agar tampak lebih kecil dari seting default 16 pixel, menjadi 12
pixel.
<style>

</style>
6. Judul halaman dapat ditentukan ukurannya relatif terhadap ukuran teks body.
Ubahlah judul halaman menjadi satu setengah (150%) dari ukuran teks body.
h1 {font-size: 1.5em;}
7. Ubahlah font menu item menjadi cetak tebal.
dt { font-weight: bold;}
8. Ubahlah teks yang diberi tanda strong menjadi tercetak miring
strong {font-style: italic;}
9. Kita bisa menambahkan smal-caps dengan menggunakan property font-variant.
Ubahlah judul agar memiliki small-caps di setiap awal kata.
h1 {
font-size: 1.5em;
font-variant: small-caps;
}
10. Untuk meubah properti font, kita dapat menggunakan jalan pintas tanpa
menuliskan jenis property yang akan diubah. Tambahkan style berikut untuk
meubah sub judul.
63
h2 {font: bold 1.2em Georgia, serif;}
Percobaan 2. Menggunakan selector.

1. Seperti yang dijelaskan pada pertemuan sebelumnya, kita dapat menggunakan
beberapa jenis selector untuk mengaplikasikan style css. Ubahlah teks yang
diberi tanda (mark) strong yang terletak di dalam dt agar berwarna merah
maroon.
dt strong { color: maroon;}
2. Ubahlah semua teks yang telah diberi id header agar berwarna teal.
#header { color: teal;}
3. Ubahlah huruf pada paragraf yang diberi id header agar tercetak miring.
#header p { font-style: italic;}
4. Ubahlah properti teks harga yang telah didefinisikan class-nya dengan nama
“price”.
.price {
font-style: italic;
font-family: Georia, serif;
}
5. Ubah juga properti class label.

.label{
font-weight: bold;
font-style: normal;
}
6. Pada bagian bawah halaman terdapat teks peringatan yang diberi class warning.
Ubahlah teks tersebut agar berwarna merah.
p.warning, sup {
font-size: x-small;
color: red;
}
Percobaan 3. Finishing
64
1. Agar halaman web ditampilkan lebih bagus, kita perlu menambahakan beberapa
efek khusus. Agar teks lebih mudah dibaca, tambahkan properti, line-height.
body {
font-size: small;
line-height: 175%;
}
2. Desain ulang header yang telah dibuat, dengan style berikut

#header { color: teal;}
h1 {
font-size: 1.5em;
color: purple;
}
#header p {
font-style: italic;
color: gray;
}
3. Tambahkan style pada tag h2

h2 {font: bold 1em Georgia, serif;
text-transform: uppercase;
letter-spacing: 8px;
color: purple;
}
4. Tambahkan efek miring pada paragraf Appetizers dan Main Course.
#appetizers p, #entrees p {
font-style: italic;
}
65
Percobaan 4. Membuat Layout
Buatlah dokumen html yang dilengkapi dengan style css seperti screenshot berikut.
66
BAB X
Padding, Borders, dan Margin
POKOK BAHASAN:
• Elemen box
• Dimensi box
• Padding
• Border
• Margin
TUJUAN BELAJAR:
• Mengaplikasikan box dilengkapi dengan komponennya.
Elemen Box
Komponen dari sebuah elemen box dapat dilihat dalam diagram berikut:
Area konten
Merupakan isi dari box itu sendiri. Pada Gambar di atas diindikasikan dengan teks
dalam kotak putih.
Sisi dalam
sisi dari area konten merupakan batas sisi dalam. Kotak ini akan berubah ketika kita
meubah ukuran width atau height. Meskipun dalam diagram di atas, sisi dalam diwarnai
putih, akan tetapi pada kenyataannya sisi tersebut tidak kelihatan.
Padding
Merupakan daerah di antara daerah konten dan border. Dalam diagram padding
ditunjukkan oleh warna orange.
Boder
Border adalah sebuah garis di sekeliling elemen.
Margin
Margin adalah ruang yang ditambahkan di luar border. Pada diagram, margin
ditunjukkan dengan warna biru, tetapi dalam kenyataannya margin selalu transparant.
Sisi terluar
Merupakan sisi luar elemen box. Dalam diagram ditunjukkan dengan garis putus-putus.
Akan tetapi dalam kenyataannya tidak terlihat.
67
Mengatasi isi konten berlebih
Ketika sebuah elemen ukurannya terlalu kecil untuk konten-nya, kita bisa
menentukan apa yang akan dilakukan oleh konten jika elemen tidak dapat
menampung., menggunakan properti overflow.
overflow
Nilai : visible | hidden | scroll | auto | inherit
Default : visible
Diaplikasikan ke : blok elemen dan mereplace
Diturunkan : tidak
Gambar 7.1 Opsi untuk mengatasi konten berlebih
Padding
Padding merupakan ruang antara area konten dan border. Padding biasanya
berguna untuk menciptakan ruang antara teks dengan border.
padding-top, padding-right, padding-bottom, padding-left
Nilai : satuan panjang | prosentase | auto | inherit
Default : auto
Diaplikasikan ke : semua elemen
Diturunkan : tidak
padding
Nilai : satuan panjang | prosentase | auto | inherit
Default : auto
Diturunkan : tidak
Properti ringkas padding

Ketika anda memberi nilai pada keempat nilai padding, maka akan diaplikasikan
68
pada setiap sisi searah jarumjam, dimulai dari sisi atas. Beberapa orang menggunakan
singkatan “TRouBLe” untuk mengingat urutan Top, Right, Bottom, Left.
{ padding: top right bottom left; }
Ketika kita memberi nilai yang berbeda, maka akan diaplikasikan berbeda pula.
1 nilai
padding: 10px;
diaplikasikan ke semua sisi
2 nilai
padding: 10px 6px;
pertama sisi atas dan bawah; kedua adalah sisi kiri dan kanan.
3 nilai
padding: 10px 6px 4px;
pertama adalah sisi atas, kedua adalah sisi kiri dan kanan, ketiga adalah bawah.
4 nilai
padding: 10px 6px 4px 10px;
diaplikasikan searah dengan jarum jam, dimulai dari sisi atap.
Percobaan 1 - Menambahkan Padding
Gambar 7.2 Sebelum dan sesudah

1) Buka file jenware.html yang telah dikopikan.
2) Tambahkan padding ke div “products”. Cari selector #products dan tambahkan
padding ke semua sisi.
#product {
padding: 2em;
background-color: #FFF;
line-height: 2em;
}
69
3) Tambahkan ruang di sisi kiri dari div “testimonials”, sehingga tanda seru pada
background terlihat jelas.
Gunakan properti padding untuk menambahkan padding sebesar 1 em ke semua
sisi. Kemudian tulis deklarasi kedua yang menambahkan padding 60 pixels pada
sisi kiri saja. Karena padding-left dideklarasikan setelah deklarasi padding
pertama, maka akan menindih padding yang pertama.
#testimonials{
padding: 1 em;
padding-left: 60px;
background...........
}
4) Simpan file yang telah diedit dan periksa hasilnya di browser.
Membuat Batas (Border) di CSS

Di dalam HTML, hanya gambar dan tabel yang memiliki batas (border). CSS
memperluas pembuatan batas ini ke semua bagian halaman. Properti-properti yang
biasa digunakan berkaitan dengan pembuatan border, diantaranya adalah sebagai
berikut:
Border, mendefinisikan lebar, gaya, dan warna untuk keempat sisi yang berbeda
( right, left, bootom, to p) dari batas. Sintaknya sebagai berikut:
border: border-width border-style border-color;
Contoh:
.dashed {border: 2px double magenta}
Gaya Border
Border-style, mendefinisikan gaya untuk keempat sisi yang berbeda (right, left, bottom,
top) dari batas. Value-nya yaitu none, dotted, dashed, solid, double, groove, ridge, inset,
dan outset. Value default-nya yaitu solid. Contoh tampilan untuk tiap nilai adalah
sebagai berikut:
70
Gambar 11.11 contoh tampilan pengaturan border di css
Lebar Border
Kita dapat menentukan ketebalan border menggunakan properti width. Kita dapat
menseting semua sisi atau sisi-sisi tertentu saja.
border-width, mendefinisikan lebar dari border untuk keempat sisi batas. Value-nya bisa
kata kunci seperti "thin, medium, thick", bisa juga berupa angka numeric.
border-top-width, boder-right-width, border-bottom-width, border-left-width
Nilai : satuan panjang | thin | medium | thick | inherit
Default : medium
Diturunkan : tidak
atau
border-width
Nilai : satuan panjang | thin | medium | thick | inherit
Default : medium
Diturunkan : tidak
Warna Border
Warna border dapat ditentukan menggunakan properti border-color. Ketika kita
menentukan warna border, maka hal tersebut aka menindih warna foreground yang
diset oleh property color untuk elemen tersebut.
border-top-color, boder-right-color, border-bottom-color, border-left- color
Nilai : nama warna atau nilai RGB/RGBA | transparent | inherit
Default : nilai dari properti warna elemen
Diturunkan : tidak
atau
border-color
Nilai : nama warna atau nilai RGB/RGBA | transparent | inherit
Default : nilai dari properti warna elemen
Diturunkan : tidak
Percobaan 2 - Menambahkan border

1) Buka file hasil percobaan 1.
2) Tambahakan garis putus-putus di sekeliling elemen testimonial.
#testimonials {
71
border: 1px dashed #F26521;
padding: 1em;
….....
}
3) Tambahkan border di sekeliling area “products” dengan warna orange ringan
(#FFBC53) sehingga tidak banyak menarik perhatian.
#products {
border: double #FFBC53;
padding: 2em;
….....
}
4) Tambahkan border untuk dekorasi pada tiap judul produk.
#product h2 {
border-top: 1px solid;
border-left: 3px solid;
padding-left: 1em;
font-size: …....
}
5) Mengganti garis bawah link dengan border bawah.
a:link, a:visited, a:hover, a:active {
text-decoration: none;
border-bottom: 1px dotted;
padding-bottom: .25em;
}
a:link, a: active { …....
Mengatur Margin di CSS

Margin merupakan property yang menentukan jarak antara batas terluar elemen,
dengan batas terluar elemen lainnya. Ini kebalikan dari property padding yang
menentukan jarak antara batas elemen dengan isi daripada elemen. Property-property
Margin juga serupa dengan property Padding, dimana terdapat juga 4 property yang
khusus untuk tiap sisi, selain property untuk keseluruhan. Selengkaptnya property-
property dari Margin dapat dijelaskan sebagai berikut:
1. Margin, mengatur jarak untuk semua sisi elemen.
2. Margin-bottom, mengatur jarak untuk sisi bawah dari elemen.
3. Margin-left, mengatur jarak untuk sisi kiri dari elemen.
4. Margin-right, mengatur jarak untuk sisi kanan dari elemen.
5. Margin-top, mengatur jarak untuk sisi atas dari elemen.
72
Percobaan 2 - penulisan property margin
Tampilan browser:
73
BAB XI
Teknik-Teknik CSS
POKOK BAHASAN:
• Properti untuk tabel
• Meubah list menjadi navigasi
• Meubah teks dengan gambar
• CSS rollovers
Memberi Style pada Tabel

Komponen dari sebuah elemen box dapat dilihat dalam diagram berikut:
Percobaan 1 - Membuat Format Tabel

1. Buka file imagetable.html dengan teks editor. Dokumen sudah mengandung
marked up tabel dan beberepa style untuk tabel tersebut. Atribut cellpadding dan
cellspacing telah ditambahkan agar spasi yang ditambahkan oleh browser di set
menjadi nol.
2. Sebelum anda menambahkan sesuatu, bukalah file imagetable.html di browser.
3. Tambahkan format ke tiap-tiap cell (elemen td) dengan cara berikut:
• tentukan ukuran padding untuk bagian atas dan bawah sebesar 6 pixel,
• padding bagian kiri 3 pixel dan padding bagian kanan 12 pixel,
• pastikan isi cell berada di bagian atas cell (vertical-align: top),
• tambahkan 1-pixel garis tegas pada setiap cell dengan menggunakan properti
border dengan warna 'olive'.
4. Tambahkan format berikut pada elemen th.
• ubah warna background menjadi 'olive' (backgroung-color) dan teks dengan
warna putih
• ubah teks pada setiap cell menjadi rata kiri (dengan properti text-align)
• tentukan ukuran padding sebesar 3 pixel untuk bagian atas, kiri, dan bawah,
sedangkan bagian kanan 12 pixel(padding).
• Pastikan teks berada di bagian bawah pada setiap cell (vertical-align).
5. Tentukan warna pada tiap baris dengan warna yang berselang-seling. Amati pada
markup tabel dan anda akan melihat bahwa setiap elemen tr telah
dikelompokkan menjadi kelas 'odd' atau 'even'. Dengan menggunakan class
identifier aplikasikan style berikut:
beri warna #F3F3A6 (kuning-hijau) untuk class 'odd'.
74
Beri warna #D4D4A2 (olive pucat) untuk class 'even'.
6. Pada rule elemen table, set properti border-collapse menjadi separate dan
tambahkan spasi 4 pixel menggunakan properti border-spacing. Amati perubahan
yang terjadi di browser.
7. Ubah properti border-collapse menjadi collapse dan hapus property border-
spacing. Amati perubahan yang terjadi di browser.
8. Terakhir, mari kita buangn border pada tiap sisi cell, dengan meubah properti
border untuk td menjadi border-bottom. Simpan file dan periksa apakah sudah
sesuai dengan hasil yang diharapkan.
Percobaan 2 - Membuat Menu dari Elemen List

1. Tuliskan markup berikut dan lengkapi struktur html-nya agar sesuai.
2. Tambahkan properti css berikut untuk menghilangkan bullet dan berjajar horisontal
75
3. Hilangkan garis bawah pada link dan tambahkan border, warna background dan
padding dengan style berikut:
Hasil:
Percobaan 3 - Membuat Menu Rollover

1. Buka file designerrific.html. Ubah format teks pada seluruh dokumen dengan
menambahkan rule pada elemen body dan set margin ke nol.
body {
margin: 0;
}
2. Gantikan judul halaman (h1) dengan gambar logo perusahaan (designerrific-
trans.gif, terletak di dalam folder images.)
h1#ds {
text-indent: -5000px;
background: url(images/designerrific_trans.gif)
no-repeat;
width: 360px;
height: 70px;
}
3. Ubah unordered list menjadi navigasi seperti dalam percobaan 2.
ul#nav {
list-style-type: none;
}
ul#nav li {
display: inline;
}
ul#nav li a {
background-color: #0A6D73;
border: 1px solid #FFF;
color: white;
font-size: 76%;
76
text-align: center;
padding: 2px 20px;
margin: 0px 2px;
}
4. Tambahkan efek rollover ke menu. Ketika mouse berada di atas menu, maka
warnanya akan berubah menjadi pink dan borde dan berubah menjadi
maroon gelap.
ul#nav li a:hover {
background-color: #F8409C;
border: 1px solid #600;
}
5. Atur tampilan header dengan style berikut:
#header {
position: relative;
background: #9cd8cd;
border-bottom: 3px double #600;
height: 100px;}
Simpan, buka di browser dan amati perubahannya.
6. Tambahkan rule berikut untuk menghilangkan beberapa spasi yang kurang
perlu.
h1#ds ul#nav {
margin: 0;
}
7. Terakhir, atur posisi h1 dan ul menjadi absolute.
h1#ds {
text-indent: -5000px;
background: url(images/designerrific_trans.gif)
no-repeat;
width: 360px;
height: 70px;
margin: 0;
position: absolute;
top: 25px;
left: 25px;
}
ul#nav {
list-style-type: none;
margin: 0;
position: absolute;
top: 65px;
right: 25px;
}
Simpan dan buka di browser.
77
Percobaan 4 - Membuat Menu Image
1. Buka file hasil dari percobaan 3. Buang background dan border dari link dan ubah
warna text menjadi dark teal (#1A7E7B). Buang background dan border dari style
a:hover.
2. Tambahkan background star-white.gif ke link menu. Tambahkan juga background
image ke a:hover.
ul#nav li a {
color: #1A7E7B;
font-size: 76%;
text-align: center;
padding: 2px 20px;
margin: 0px 2px;
background: url(images/star-white.gif) left
center no-repeat;
}
ul#nav li a:hover {
background: url(images/star-pink.gif) left
center no-repeat;
}
78

Modul Praktikum

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 1

Apa itu HTML?

<nama elemen> Isi di sini </nama elemen>

Struktur Dokumen (X)HTML

Struktur minimal dokumen (X)HTML):

f. Simpan file, dan buka di browser.

Percobaan 3, Mendefinisikan Elemen Teks

Percobaan 4, Memberikan Komentar dan Menampilkan Tag pada

Percobaan 1, Membuat Garis Horisontal dan Daftar (list)

Percobaan 3, Notasi Khusus

Simbol Notasi html

Percobaan 5, Subscript dan Superscript

Contoh rumus molekul <br>

Percobaan 6, Ukuran Font

<font size="2">Teks ini mempunyai size=2x<br>

TUJUAN LINK DAN CARA PENULISAN LINK

Percobaan 1, Membuat struktur direktori dan halaman utama

Percobaan 7, Membuat link menggunakan image

Percobaan 8, Membuat link yang menuju ke bagian tertentu (bookmark) dalam

Percobaan 9, Membuat link yang menuju ke bagian tertentu

Percobaan 3. Dimensi tinggi dan lebar

Percobaan 4. Aligment image

Percobaan 5. Float image

PENJELASAN MODEL TABEL

Keterangan mengenai atribut dari sebuah tabel.

Percobaan 2. Penataan Tabel

Percobaan 3. Penataan Isi Tabel dan Pewarnaan Latar

Percobaan 4. Penggabungan Isi Sel (merge)

Percobaan 5. Pengaturan Paragraf dan Tabel dalam Tabel

Percobaan 6. Menyisipkan Gambar dalam Sel

Cascading Style Sheet (CSS) 3

Jenis Pengaturan CSS

tag <h1>. Selector digunakan untuk mendefinisikan bagaimana tag ditampilkan.

Dukungan Browser Terhadap CSS

Cara penggunaan css

Gambar 11.1 contoh inlinestyle.css

Percobaan 2– Embedded Styles

3. Linked styles / External Styles

Sebagai catatan, komentar dapat dimasukkan didalam blok komentar /* dan */

Percobaan 3 – External CSS

Percobaan 4 – Struktur Dasar HTML5

Percobaan 5 – Mengatur Posisi Komponen Halaman

/* Beritahu browser agar merender elemen HTML 5 sebagai

/* membuat sudut tumpul */

Warna dan Latar Belakang

Spesifikasi Nilai Warna

Warna Foreground dan background

Percobaan1 Warna background

Berikut ini contoh dari pseudoelement

Menambahkan background image

Posisi Background image

Percobaan 3 Posisi Background image

Percobaan 4 Background Attachment

Shorthand background Property

Perintah di atas dapat dituliskan seperti berikut:

Percobaan 4 Background Attachment

BOX-SHADOW (Efek Bayangan)

Box-shadow property dapat menerima daftar bayangan yang dipisahkan

Membuat Drop Shadow Dasar

Percobaan 1 Membuat bayangan sisi luar.

Hasil yang diharapkan:

Percobaan 2 Membuat bayangan sisi dalam

Percobaan 3 Membuat banyak bayangan

Percobaan 5 Membuat bayangan dengan border-radius