RPG Fantasy Web Indonesia Forum

Kingdom Services => Level-Up Training Lot => Topik dimulai oleh: Èxsharaèn pada 15 Mei 2008, 07:37:20

Judul: Buat Web yuk! (XHTML + CSS)
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 07:37:20
Oke! Penasaran ingin bikin Web sendiri? Bingung ketika ingin mengkustomisasi halaman profil Friendster karena tidak tahu HTML dan CSS? Sekarang saatnya untuk belajar! Jangan khawatir, XHTML dan CSS itu tidak seseram namanya kok, bahkan kalau sudah tahu sedikit tentang mereka berdua, kalian bisa memulai perjalanan menguasai Internet.

Sebelumnya, siapkan hal-hal berikut:

1. Editor teks. Paling sederhana adalah Notepad, paling aku anjurkan adalah Notepad++. Jangan gunakan Microsoft Word karena standarnya beda.

Yup, itu saja! Hal-hal berikut opsional sekali:

2. Perangkat lunak manajemen situs. Yang paling populer adalah Adobe (dulu Macromedia) Dreamweaver dan Microsoft FrontPage.

3. Berbagai perambah populer. Semakin banyak semakin baik. Usahakan versinya bukan yang terbaru, tapi jangan terlalu dirisaukan kalau kita punyanya yang terbaru (dan memang dianjurkan begitu kan?). Yang aku anjurkan saat ini adalah Internet Explorer, Opera, Firefox, dan Safari.

Yang sudah mahir XHTML dan CSS bisa lompat ke artikel Buat web yuk! berikutnya yang akan membahas server-side scripting dengan PHP (artikelnya belum dibuat, sabar yaa...).

Yuk mulai!
Judul: XHTML + CSS
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 07:49:00
Sebelumnya, apa sih XHTML itu? Apa bedanya dengan HTML (bagi yang sudah pernah belajar)?

Well, XHTML adalah EXtensible Hyper-Text Markup Language. Tidak perlu diterjemahkan, tapi intinya XHTML adalah HTML yang diperluas. Nah, HTML itu sendiri, dalam kalimat paling sederhana, adalah bahasa yang digunakan untuk membangun sebuah halaman Web. Halaman HTML paling sederhana berbentuk seperti ini:

Kode: [Pilih]
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

HTML dan XHTML termasuk CSS dikelola oleh lembaga nirlaba internasional W3C (World Wide Web Consortium, www.w3c.org). Versi HTML terakhir adalah 4, dan menurut isu yang beredar HTML 5 sedang disusun.

Itu saja mengenai XHTML. Mengenai istilah, sebuah tag adalah apapun yang berada di dalam tanda kurung sudut <>. Jadi, pada contoh di atas, tag yang ada adalah html, head, title, body, p. Tag biasanya berpasangan, namun ada yang berdiri tunggal, contohnya img.

Nah, CSS apa lagi? CSS adalah Cascading Style Sheet. Sesuai namanya, CSS digunakan untuk memberi style pada sebuah halaman Web. Ini dilakukan karena sebelumnya styling dilakukan di halaman HTML-nya juga, dan mulai timbul kesulitan-kesulitan saat misalnya harus mengubah warna sebuah header di seluruh situs, selain membuat halaman HTML-nya menjadi tidak terstruktur dengan jelas. Contoh CSS adalah seperti berikut.

Kode: [Pilih]
p {
text-align: center;
color: #00FF00;
}
div .menu {
font-weight: bold;
color: #FFFF00;
}
td #form {
vertical-align: top;
}

Jangan khawatir kalau kalian masih bingung cara membaca CSS itu, kita akan ulas lebih dalam setelah XHTML dasar terpenuhi.

Nah, setelah tahu dasarnya, bagaimana membuat sebuah halaman Web menggunakan XHTML?
Judul: Jenis-jenis XHTML
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 08:20:05
Waduh, apa ini? Apa XHTML punya beberapa jenis? Sayangnya, jawabnya adalah ya. XHTML terdiri dari 3 jenis:

1. Strict XHTML
XHTML ini paling "mengerikan" karena aturannya ketat sekali. Semua tag yang mengatur style tidak boleh ada, dan dokumen itu tidak boleh menggunakan frame. Ada beberapa lagi aturan yang jika disatukan bisa menjadi mimpi buruk semua pembuat Web; untungnya W3C memberikan alat validator di http://validator.w3.org untuk mengecek dokumen XHTML (dan CSS) kita. Beberapa program manajemen situs seperti Adobe Dreamweaver juga punya fasilitas ini.

2. Transitional XHTML
XHTML ini lebih baik, karena beberapa kesalahan yang tidak ditoleransi Strict XHTML masih diterima oleh Transitional XHTML. Namun, XHTML ini tidak menganjurkan penggunaan tag yang mengatur style dan penggunaan frame. Versi XHTML ini dibuat untuk memfasilitasi orang yang berpindah dari HTML ke XHTML.

Lha terus kalau masih perlu frame, gimana dong?

3. Frameset XHTML
Ini jawabannya. XHTML ini hanya digunakan kalau kebetulan kita memerlukan frame, walaupun penggunaan frame sudah mulai jarang.

Supaya tidak bingung, kita akan ambil XHTML termudah, yaitu Transitional XHTML.
Judul: Struktur dokumen XHTML
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 08:39:27
Nah, setelah tahu jenis-jenisnya, saatnya membuat dokumen XHTML. Struktur dokumen XHTML, apapun jenisnya, adalah:

1. DTD (Document Type Declaration)
Ini diletakkan di baris teratas dokumen. Fungsinya adalah memberi tahu perambah kita jenis dokumen yang kita buat.

2. Head
Head digunakan untuk memberi informasi tambahan tentang dokumen XHTML kita, misalnya judul, keyword, dll.
Di XHTML, semua dokumen wajib punya judul.

3. Body
Di sinilah isi dokumen XHTML kita berada.

Struktur fisiknya seperti ini:

Kode: [Pilih]
<?xml version="1.0" encoding="utf-8" ?> --> opsional
<!DOCTYPE (DTD)>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Judul dokumen di sini</title>
</head>
<body>
</body>
</html>

DTD tergantung tipe XHTML yang kita gunakan:

Strict XHTML
Kode: [Pilih]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional XHTML
Kode: [Pilih]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Frameset XHTML
Kode: [Pilih]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Mau tidak mau harus dihapalkan... namun, kalau menggunakan Adobe Dreamweaver misalnya, struktur di atas otomatis dibuatkan.

Nah, baris ini:
Kode: [Pilih]
<?xml version="1.0" encoding="utf-8" ?>
menandakan kalau dokumen kita adalah XML (XHTML memang mengadopsi XML). Bisa diabaikan kalau tidak mau repot. Encoding perlu diperhatikan kalau dokumen kita mengandung karakter non-Inggris. Definisi encoding bisa juga diletakkan pada tag meta di dalam head:
Kode: [Pilih]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Yang umum dipakai sekarang adalah UTF-8 yang mendukung hampir seluruh bahasa di dunia.

Ribet? Ya memang begitu, jadi yang di atas dihapalkan saja (atau gunakan saja Adobe Dreamweaver). Selanjutnya, kita akan menilik aturan-aturan dasar dalam XHTML yang mungkin tidak ada di HTML.
Judul: Aturan dasar XHTML
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 09:03:25
Nah, XHTML aturannya lebih ketat dari HTML. Apa saja itu?

1. Dokumen XHTML harus memiliki satu dan hanya satu tag HTML.
Pada HTML, tag html bahkan bisa diabaikan tanpa membuat dokumen itu menjadi tidak terbaca. Pada XHTML, ini tidak diizinkan.

2. Tag, termasuk atribut, harus ditulis dengan huruf kecil.
Pada HTML, <HTML> <html> <HtMl> dibenarkan. Pada XHTML, hanya <html> yang dibenarkan.
Atribut adalah opsi tambahan yang bisa dimiliki oleh sebuah tag. Misalkan, tag img memiliki atribut src untuk mendefinisikan URL gambar. Penulisan yang benar pada XHTML adalah <img src="gambarku.jpg" />.

3. Semua tag harus berpasangan.
Pada HTML, tag penutup bisa diabaikan (jadi <p>Hello World! diizinkan). Pada XHTML, itu tidak boleh terjadi (yang benar <p>Hello World!</p>.
Lha bagaimana dengan tag yang memang tidak punya pasangan (misal img, br, hr)? Pada XHTML, tag ini ditutup dengan spasi diikuti tanda /. Contoh: <img />, <br />, <hr />.

4. Semua tag harus berpasangan dengan benar.
Lah apa lagi ini? Ini sering terjadi pada tag yang punya anak di dalamnya (nested tag). Contoh:

Kode: [Pilih]
<p>Ini paragraf yang <strong>punya teks dicetak tebal</strong>. Asyik kan?</p>

Di situ, tag p punya anak strong. Tag strong harus ditutup lebih dahulu sebelum tag p ditutup. Jadi, yang berikut ini salah:

Kode: [Pilih]
<p>Ini paragraf yang <strong>punya teks dicetak tebal. Asyik kan?</p></strong>

Untuk mengatasi aturan nomor 4, biasakan begitu membuka tag, langsung tutup saat itu juga. Jangan tulis isinya dulu. Contoh, untuk menulis contoh di atas, biasakan seperti ini:
Kode: [Pilih]
1. <p></p>
2. <p>Ini paragraf yang <strong></strong></p>
3. <p>Ini paragraf yang <strong>punya teks dicetak tebal</strong>. Asyik kan?</p>

Kalau anaknya banyak sekali (misalkan saat membuat tabel), biasakan memberi indentasi yang cukup untuk tiap anak. Contoh:

Kode: [Pilih]
<table>
  <tr>
    <td></td>
    <td></td>
    <td>
      <img src="gambarku.jpg" />
    </td>
  </tr>
</table>

Aturan nomor 3 dan 4 aku kira sama dengan BBCode :D

5. Semua atribut harus memiliki nilai.
Pada HTML, ada beberapa atribut yang bisa tidak diberi nilai, misalkan <input type="checkbox" checked />. Pada XHTML, ini tidak diizinkan. Untuk atribut yang disingkat (minimized attribute) seperti checked, beri nilai nama yang sama dengan atributnya. Jadi, yang benar adalah <input type="checkbox" checked="checked" />.

6. Semua nilai atribut harus diapit tanda kutip ganda "".
Pada HTML, nilai atribut boleh diapit tanda kutip tunggal '' atau bahkan tidak sama sekali, misalkan <img src='gambarku.jpg' /> atau <img src=gambarku.jpg />. Di XHTML, yang benar hanya <img src="gambarku.jpg" />.

7. Gunakan escape character.
Escape character adalah karakter khusus yang disiapkan untuk kasus tertentu. Lihat kan tanda "<" dipakai untuk membuka tag? Lha kalau mau menuliskan tanda itu gimana? Gunakan escape character &lt;. Ini akan kita bahas lebih jauh nanti.

Fyuh... banyak juga yah aturannya... Jangan khawatir, pada awalnya mungkin aturan-aturan ini dirasa memberatkan. Pelan-pelan biasakan diri pada aturan-aturan tersebut.

Sekarang, kita siap membuat dokumen XHTML pertama kita!
Judul: Hello World!
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 09:13:18
Seperti biasa, pertama kali kita hanya akan menulis sebuah dokumen sederhana yang berisikan "Hello World!". Sebelumnya, kita sepakat satu hal. Kode-kode yang dituliskan setelah ini, kecuali aku tuliskan lengkap pada kasus tertentu, adalah kode XHTML yang diletakkan di dalam tag <body>. Gunakan saja struktur Transitional XHTML yang sudah disediakan di atas.

Atau, kalau malas scroll lagi, ini kerangka dasar dokumen Transitional XHTML:

Kode: [Pilih]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Judul dokumen di sini</title>
</head>
<body>
</body>
</html>

Siap? Ini kodenya:

Kode: [Pilih]
<h1>Hello World!</h1>
<p>Ini adalah paragraf pertamaku.</p>
<hr />
<p>Ini paragraf kedua. Teksnya lebih bervariasi, karena ada yang <strong>dicetak tebal</strong>, <em>dicetak miring</em>, <span style="text-decoration:underline;">digaris bawah</span>. Asyik ya?</p>
<p>Pergi ke halaman lain ah! <a href="hal2.html">Klik di sini (awas error!)</a>.</p>

Simpan dengan nama apa saja, yang penting berakhiran .html. Coba buka di perambah kesukaan. Hasilnya mungkin mirip seperti berikut:

Kutip

Hello World!

Ini adalah paragraf pertamaku.


Ini paragraf kedua. Teksnya lebih bervariasi, karena ada yang dicetak tebal, dicetak miring, digaris bawah. Asyik ya?

Pergi ke halaman lain ah! Klik di sini (awas error!).

Judul: Explain the XHTML!
Ditulis oleh: Èxsharaèn pada 15 Mei 2008, 09:49:25
Gimana, bisa? Usahakan jangan hanya sekedar salin tempel yah (kecuali untuk struktur dokumen), supaya terlatih taat pada aturan dan menghapalkan tag XHTML (percaya deh, kalau hapal, bikin dan edit Web tanpa bantuan Dreamweaver bukan hal yang mustahil lagi).

Oke! Berikut tag-tag yang muncul pada contoh pertama kita.

<h1> adalah header level pertama (tahu header yah?). Total ada 6 level header, yaitu <h1> hingga <h6>. Style-nya bisa diatur lewat atribut style (namun tidak dianjurkan) atau CSS. Sementara kita hilangkan dulu pikiran untuk mengatur style dokumen kita (puas dulu yah hitam putih...).

<p>, seperti yang akan sering kita pakai, menandakan paragraf baru.

<hr /> adalah horizontal rule.

<strong> dan <em> berturut-turut digunakan untuk mencetak tebal dan memiringkan teks. Lho? Di HTML dulu bukannya itu <b> dan <i>? Memang, namun karena XHTML berusaha sebaik mungkin membuang styling dari dokumennya (ke CSS), kedua tag itu sudah tidak disarankan. Selain itu, menggunakan tag <strong> dan <em> lebih ramah pada mesin pembaca teks (teks yang diapit tag <strong> akan dibaca dengan kuat sementara <em> diberi penekanan, sesuai dengan namanya: emphasize).

<span> digunakan kalau pada suatu blok kita ingin menambahkan blok baru (istilahnya inline block). Biasanya dipakai kalau kita ingin mengganti style suatu teks tertentu saja. Atribut yang dipakai adalah style, dan nilainya sama persis dengan yang ada di CSS. Kita bahas ini saat membahas CSS. Ingat, tag <u> pada HTML sudah dibuang di XHTML.

<a>, anchor, digunakan untuk membuat hyperlink. Atribut yang diperlukan adalah href, yang berisi URL halaman yang dituju. Kalau masih berada pada satu map, tuliskan langsung namanya, lengkap dengan ekstensinya. Kalau tidak berada pada satu map yang sama, ada dua cara:

1. Relative path.
Maksudnya, kita berikan arah pada atribut href, relatif terhadap letak dokumen kita sekarang. Misalkan begini. Berkas index.html ada di map teratas suatu situs sementara berkas index2.html ada di map mapku. Maka, letak berkas index2.html relatif terhadap index.html adalah "mapku/index2.html", sementara letak berkas index.html relatif terhadap index2.html adalah "../index.html". Tanda .. digunakan setiap kali kita naik map, jadi andaikan perlu naik map dua kali, tuliskan ../../berkasku.html.

2. Absolute path.
Arahan ini selalu dihitung dari map teratas (root folder). Jadi, pada contoh di atas, lokasi absolut berkas index.html adalah "/index.html" sementara lokasi absolut berkas index2.html adalah "/mapku/index2.html".

Nah, selain berpindah ke halaman lain, tag <a> juga bisa dipakai untuk berpindah ke lokasi lain di halaman yang sama. Tekniknya adalah sebagai berikut:

1. Mendefinisikan dulu penanda lokasi, dengan cara:
Kode: [Pilih]
<a name="lokasi">Teks di sini (boleh juga dikosongkan)</a>

2. Membuat tautan (hyperlink) ke lokasi tersebut, dengan cara:
Kode: [Pilih]
<a href="#lokasi">Teks di sini...</a>
Jika href diisi "#", itu tandanya tautan kita akan mengarah ke bagian teratas halaman kita.

Teknik ini biasa dipakai untuk membuat daftar isi (dan aku gunakan untuk membuat catatan kaki di RPN OJ forum ini). Contohnya:

Kode: [Pilih]
<a name="contents"></a><h1>Daftar Isi</h1>
<p><a href="#1">Pendahuluan</a><br />
<a href="#2">Dasar Teori</a></p>
<h1><a name="1">Pendahuluan</a></h1>
<p>Di sini adalah bab pendahuluan. Isinya mungkin macam-macam dan biasanya membosankan, namun perlu dibaca agar pembaca dapat memahami apa tujuan penulisan buku ini. Biasanya berisi latar belakang penulisan, tujuan penulisan, rumusah masalah, penyelesaian masalah, metode-metode yang digunakan, dan sistematika penulisan.</p>
<p><a href="#contents">Kembali ke atas.</a></p>
<h1><a name="2">Dasar Teori</a></h1>
<p>Di sini dijabarkan dasar teori yang digunakan untuk penelitian. Biasanya hanya salin tempel dari punya teman saking seringnya dasar teori yang sama digunakan.</p>
<p><a href="#contents">Kembali ke atas.</a></p>

Hasilnya:

Kutip

Daftar Isi

Pendahuluan
Dasar Teori

Pendahuluan

Di sini adalah bab pendahuluan. Isinya mungkin macam-macam dan biasanya membosankan, namun perlu dibaca agar pembaca dapat memahami apa tujuan penulisan buku ini. Biasanya berisi latar belakang penulisan, tujuan penulisan, rumusah masalah, penyelesaian masalah, metode-metode yang digunakan, dan sistematika penulisan.

Kembali ke atas.

Dasar Teori

Di sini dijabarkan dasar teori yang digunakan untuk penelitian. Biasanya hanya salin tempel dari punya teman saking seringnya dasar teori yang sama digunakan.

Kembali ke atas.


Bagaimana? Mudah kan?
Judul: Re: Buat Web yuk! (XHTML + CSS)
Ditulis oleh: Stash pada 16 Mei 2008, 02:18:56
Hmmm... sampai sekarang sih masih mudah diikuti. Lanjut!!!! Tapi aku mau mengingatkan dulu, aku pasti gak akan hafal kodenya yang berjibun itu :D
Judul: Image
Ditulis oleh: Èxsharaèn pada 17 Mei 2008, 12:06:59
XHTML nggak harus dihapal sih, tapi kode-kode yang aku berikan ini sudah yang paling sering dipakai. Nanti otomatis hapal sendiri :)

Ini mungkin yang paling seru untuk penggemar pengganti tampilan FS, yaitu tag untuk menampilkan gambar. Simpel saja, namanya <img>. Atribut yang penting adalah:

src: URL gambar kita berada (source). Boleh pakai relative path atau absolute path. Wajib diisi.

alt: Teks alternatif (alternate) kalau kebetulan gambar kita tidak bisa diakses atau pengunjung mematikan gambar. Pada beberapa perambah, teks ini akan keluar saat kita menghentikan tetikus di atas gambar.

Oh ya, ini termasuk tag yang tidak punya pasangan, jadi jangan lupa cara nutupnya.

Contoh!

Kode: [Pilih]
<img src="http://forum.rpgfantasy.web.id/Smileys/Lots_O_Smileys/spam4.gif" alt="No spam please!!!" />

hasilnya

Kutip
No spam please!!!
.

Mudah kan?
Judul: Errata
Ditulis oleh: Èxsharaèn pada 17 Mei 2008, 12:13:11
Sori...

Errata

Di atas, tertulis:

2. Absolute path.
Arahan ini selalu dihitung dari map teratas (root folder). Jadi, pada contoh di atas, lokasi absolut berkas index.html adalah "/index.html" sementara lokasi absolut berkas index2.html adalah "/mapku/index2.html".

Ini masih termasuk relative path, yaitu relatif terhadap map teratas. Yang benar adalah:

2. Absolute path.
Arahan ini adalah URL penuh sebuah berkas HTML (http://domain.tld/folder/file.html). Jadi, misalkan, berkas index.html dan index2.html di contoh sebelumnya ada di forum ini. Absolute path-nya adalah:
http://forum.rpgfantasy.web.id/index.html
http://forum.rpgfantasy.web.id/mapku/index2.html

Tolong tautannya jangan diklik karena pasti error ;D
Judul: Tabel
Ditulis oleh: Èxsharaèn pada 07 Juni 2008, 06:16:56
Nah, yang satu ini mungkin berguna juga untuk bikin tabel di forum ini, walaupun harus pakai BBCode. Sekalian dilihat toolbar di atas yah untuk ilustrasi tabel.

Untuk membuat tabel, tag yang diperlukan adalah <table>. Di dalam tag inilah kita akan menyusun tabel kita. Caranya:

1. Buat baris dulu (row). Dengan ini, tag yang diperlukan, sudah bisa tebak? <tr>.

2. Untuk tiap baris, barulah kita buat tiap kolom atau tiap sel. Tag yang diperlukan adalah... <td>.

Yang perlu diingat, jumlah kolom untuk seluruh baris harus sama, kalau tidak tabelnya akan aneh nanti.

Yuk kita coba! Kita buat tabel yang sederhana saja, tabel yang terdiri dari dua baris dan dua kolom. Kodenya:

Kode: [Pilih]
<table>
  <tr>
    <td>Baris 1 kolom a</td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>

(Note: Ini bisa dicoba dengan BBCode. Gantikan <> dengan [].)

Hasilnya:

Baris 1 kolom a Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b

Aduh, nggak terlihat jelas selnya... Ayo kita tambah border. Untuk membuat border, gunakan atribut border. Nilainya adalah angka positif, dalam pixel. Untuk BBCode, sayangnya, trik ini tidak berhasil.

Kode: [Pilih]
<table border="1">
  <tr>
    <td>Baris 1 kolom a</td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>
menghasilkan
Baris 1 kolom a Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b
Judul: Tabel lebih lanjut
Ditulis oleh: Èxsharaèn pada 07 Juni 2008, 06:37:19
Ada beberapa tabel yang nggak standar seperti yang kita buat barusan, misalnya seperti ini:

ProvinsiJumlah penduduk (juta)
19902000
Jawa Timur812

Kodenya seperti ini:

Kode: [Pilih]
<table border="1">
  <tr><th rowspan="2">Provinsi</th><th colspan="2">Jumlah penduduk (juta)</th></tr>
  <tr><th>1990</th><th>2000</th></tr>
  <tr><td>Jawa Timur</td><td>8</td><td>12</td></tr>
</table>

Bingung? Ayo kita tilik satu per satu.

Tag <th> maksudnya adalah table header. Ini posisinya sama dengan tag <td>, jadi menggunakan tag <th> dianggap sebagai satu kolom.

Atribut rowspan dan colspan masing-masing digunakan untuk menggabungkan beberapa sel menjadi satu. Kalau rowspan berarti menggabungkan beberapa baris (sesuai namanya, row span), kalau colspan berarti menggabungkan beberapa kolom.

Masih bingung? Coba kita pakai tabel lain yang lebih sederhana.

Untuk rowspan:
Kode: [Pilih]
<table border="1">
  <tr><th rowspan="2">Baris 1 kolom 1 dan baris 2 kolom 1 digabung</th><td>Baris 1 kolom 2</td></tr>
  <tr><td>Baris 2 kolom 2</td></tr>
</table>
menghasilkan
Baris 1 kolom 1 dan baris 2 kolom 1 digabungBaris 1 kolom 2
Baris 2 kolom 2

Untuk colspan:
Kode: [Pilih]
<table border="1">
  <tr><td colspan="2">Baris 1 kolom 1 dan 2 digabung</td></tr>
  <tr><td>Baris 2 kolom 1</td><td>Baris 2 kolom 2</td></tr>
</table>
hasilnya:
Baris 1 kolom 1 dan 2 digabung
Baris 2 kolom 1Baris 2 kolom 2

Usahakan tiap sel ada isinya. Misalkan saja ada satu sel yang tidak terisi:
Kode: [Pilih]
<table>
  <tr>
    <td></td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>
akan menghasilkan tabel yang agak aneh:
Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b

Di beberapa perambah, sel pertama bisa diisi border yang meluas menutupi sel kosong tersebut. Untuk menghindari hal ini, berikan isi pada sel kosong tersebut. Gunakan saja &nbsp; alias non-breaking space.

Wah, apa lagi tuh &nbsp;? Apa ini termasuk tag HTML?
Judul: Special character
Ditulis oleh: Èxsharaèn pada 07 Juni 2008, 06:51:40
Pada XHTML, ada beberapa karakter yang tidak bisa dituliskan begitu saja. Misal aku mau menulis paragraf berikut:

Kutip
Pada HTML, tag <p> digunakan untuk membuat paragraf baru.

Apa HTML-nya seperti ini?

Kode: [Pilih]
<p>Pada HTML, tag <p> digunakan untuk membuat paragraf baru.</p>

Hasilnya:

Kutip

Pada HTML, tag

digunakan untuk membuat paragraf baru.


Lah, ke mana "<p>" kita? Kok diterjemahkan sebagai tag baru?

Untuk alasan itulah, HTML dan generasi penerusnya memiliki special character. Karakter khusus ini ditandai dengan tanda dan &, diikuti nama atau kode karakter, diakhiri tanda titik koma ;. Contoh:

< dalam bahasa Inggris adalah less than, maka namanya &lt;.
> dalam bahasa Inggris adalah greater than, jadi namanya &gt;.

HTML kita akan menjadi seperti berikut:

Kode: [Pilih]
<p>Pada HTML, tag &lt;p&gt; digunakan untuk membuat paragraf baru.</p>

Beberapa karakter khusus yang paling sering digunakan adalah:

&copy; (copyright) ©
&nbsp; (non-breaking space)   (dijamin nggak kelihatan, tapi ada spasi tambahan di baris ini)
&mdash; (em-dash) —
&ndash; (en-dash) –
&amp; (ampersand, tanda &) &

Karakter non-Inggris juga ditulis dengan cara ini. Namaku, Èxsharaèn, akan dikodekan dengan &Egrave;xshara&egrave;n.
Judul: Styling
Ditulis oleh: Èxsharaèn pada 07 Juni 2008, 07:06:09
Nah, aku rasa seluruh tag itu sekarang sudah bisa digunakan untuk membuat sebuah halaman Web yang komplit. Misalkan ada sesuatu yang lupa terulas di atas, silakan tanyakan langsung. Berikutnya, kita akan tinggalkan sejenak XHTML untuk masuk ke materi yang sudah ditunggu-tunggu: membuat halaman Web kita menjadi tambah hidup dengan styling. Yup, kita siap melangkah ke CSS!

CSS sejatinya tidak susah, misalkan dengan bantuan Adobe Dreamweaver. Namun, ada kalanya kita tidak punya akses ke Dreamweaver, misalkan lagi di warnet, dan kita ingin mengganti style situs kita. Jangan khawatir, dengan sedikit pengetahuan tentang CSS, ditambah referensi pada W3 Schools (http://www.w3schools.com/css/css_reference.asp), kita bisa melakukan styling apa saja pada situs kita. Yup, CSS agak banyak, jadi mungkin untuk awalnya ngintip saja di referensinya (aku sendiri sampai sekarang nggak terlalu hapal CSS). Kita akan langsung gunakan CSS2.

Sebenarnya ada 3 cara untuk melakukan styling dalam XHTML. Urut dari prioritas tertinggi (yang akan menumpuk seluruh styling dengan dirinya), ketiganya adalah sebagai berikut.

1. Inline styling
Ini dilakukan dengan bantuan atribut style pada hampir seluruh tag HTML. Contoh:

Kode: [Pilih]
<p style="direction:rtl;">Teks ini akan dicetak dari kanan ke kiri. Berguna untuk menulis Arab misalnya.</p>
menghasilkan

Teks ini akan dicetak dari kanan ke kiri. Berguna untuk menulis Arab misalnya.


2. Internal style sheet
Ini dilakukan pada bagian head halaman XHTML kita dengan menggunakan tag <style>. Contoh:

Kode: [Pilih]
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
<head>
<body>
<p>Halo! Teks ini akan dicetak berwarna merah di tengah halaman.</p>
<p>Seluruh paragraf pada halaman ini akan bernasib sama, kecuali kita mendefinisikan inline style baru, seperti yang terjadi pada paragraf berikut.</p>
<p style="text-align: justify; color:black;">Paragraf ini tidak terpengaruh inline style sheet.</p>
</body>

Hasilnya adalah:

Kutip

Halo! Teks ini akan dicetak berwarna merah di tengah halaman.

Seluruh paragraf pada halaman ini akan bernasib sama, kecuali kita mendefinisikan inline style baru, seperti yang terjadi pada paragraf berikut.

Paragraf ini tidak terpengaruh inline style sheet.


3. External style sheet

Ini dilakukan dengan memberi tautan pada berkas XHTML kita ke berkas CSS terpisah. Dengan cara ini, seluruh halaman yang memiliki tautan ke berkas CSS kita akan otomatis diperbarui jika berkas CSS-nya diperbarui. Berkas CSS eksternal ditandai dengan ekstensi .css.

Pada berkas XHTML kita, berikan tautan pada bagian head dengan tag <link>:

Kode: [Pilih]
<link rel="stylesheet" type="text/css" href="berkas_cssku.css" />

Nah, dari tadi sebenarnya kita sudah mengetahui format CSS kita. Formatnya adalah:

Kode: [Pilih]
selector {property: value;}

selector adalah tag HTML yang ingin kita beri style. property adalah atributnya yang ingin kita ganti (misalnya warna, jenis huruf, dsb.), dan value tentu saja adalah nilainya.

Dengan ini, kita siap bermain-main dengan style halaman kita. Untuk selanjutnya, kita akan gunakan cara ketiga, yaitu external style sheet. Sejauh artikel ini nanti, aku akan asumsikan nama berkas CSS-nya adalah mystyle.css, jadi jangan lupa tag berikut di head halaman XHTML-nya:

Kode: [Pilih]
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Judul: Font dan Style
Ditulis oleh: Èxsharaèn pada 31 Juli 2008, 03:10:00
Note: Berhubung kodenya cukup pendek, aku gunakan cara pertama saja ya :)

Bosan dengan tampilan standar teks kita selama ini yang hanya Times New Roman? Atau ukurannya kurang besar, atau bahkan kebesaran? Mau bikin tulisan warna-warni? Perlu garis bawah?

CSS untuk font dan segala formatnya ada di sini. Berikut selector yang paling sering digunakan.

font-family
Di sinilah nama font yang ingin kita gunakan dispesifikasikan. Namun, hati-hati, tidak semua orang punya font yang sama, jadi usahakan sebisa mungkin gunakan font yang umum, misalnya Arial, Verdana, Georgia, Times New Roman, Comic Sans MS, dan sebagainya.

Kalau ingin menggunakan lebih dari satu font, pisahkan dengan tanda koma. Nanti sistem si pengunjung akan mencari font mana yang tersedia, jadi andaikan ingin menggunakan font yang tidak standar, usahakan menambahkan font standar yang akan digunakan andaikan saja ternyata font itu tidak ada di tempat pengunjung situs kita. Ingat untuk mengapit seluruh nilai dengan tanda kutip ganda (kecuali kalau menggunakan style pertama, tidak perlu tanda kutip).

Contoh:
Kode: [Pilih]
<p style="font-family: Arial, Verdana;">Teks ini ditulis dengan font Arial. Kalau saja ada yang tidak punya Arial, Verdana akan digunakan.</p>
menghasilkan
Kutip

Teks ini ditulis dengan font Arial. Kalau saja ada yang tidak punya Arial, Verdana akan digunakan.


Pilihan font terakhir yang akan digunakan jika seluruh font yang kita daftarkan ternyata tidak ada juga (ingat, tidak semua orang pakai Windows :)) adalah salah satu dari dua kata kunci berikut: serif atau sans-serif. serif adalah seluruh font yang punya ujung berornamen di beberapa hurufnya. Ambil contoh Times New Roman. Sebaliknya, sans-serif (sans berarti tidak) tidak punya ornamen, contohnya Arial. Dengan cara ini, teks kita akan aman karena ada satu font yang akan dipilih (serif dasarnya adalah Times New Roman, sans-serif dasarnya Arial; ini ketetapan universal dan tidak bisa diubah), walaupun perambah terkini sebenarnya mampu memilih sendiri font yang akan digunakan andaikan saja kita tetap bandel tidak memberikan kata kunci terakhir (biasanya akan jadi serif, tapi jika font yang namanya mirip ternyata sans-serif, jadilah font kita sans-serif).

font-size
Perlu membesarkan ukuran teks? Gunakan selector ini. Nilainya bisa didefinisikan dalam unit tertentu (nanti akan aku jelaskan lebih lanjut apa saja unit-unitnya, karena ini bisa dipakai untuk nilai ukuran selector yang lain) atau nilai relatif: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Contoh:

Kode: [Pilih]
<p style="font-size: 24pt;">Teks ini ditulis dengan ukuran 24 point.</p>
<p style="font-size: smaller;">Paragraf ini lebih kecil sedikit dari ukuran normal. <span style="font-size: medium;">Normalnya segini,</span><span style="font-size: 12pt;"> sama dengan 12 point.</span></p>
menghasilkan
Kutip

Teks ini ditulis dengan ukuran 24 point.

Paragraf ini lebih kecil sedikit dari ukuran normal. Normalnya segini, sama dengan 12 point.


Nah, aku break sebentar dari selector font dan style untuk menjelaskan lebih jauh unit-unit yang dipakai di CSS.
Judul: Unit
Ditulis oleh: Èxsharaèn pada 31 Juli 2008, 03:53:05
CSS mengenal beberapa unit yang nanti bisa kita gunakan untuk menyatakan suatu ukuran, misalnya di selector font-size yang baru saja kita kenal. Unit-unit itu adalah:

%
Mudah saja, ini adalah persentase. Persentase dari apa? Tergantung. Pada font-size tadi, persentase ini dihitung dari ukuran standar, yaitu 12 point (asalkan font size perambah 100%). Jika perlu, nanti aku akan beri tahukan ukuran 100% dari suatu selector tertentu.

in, cm, mm
Hayo, siapa yang nggak tahu singkatan ini ;D berturut-turut, mereka adalah inch, centimeter, dan milimeter. Cocok untuk desain yang memerlukan ketelitian ukuran saat dicetak (misalkan brosur).

em
1em sama dengan ukuran font yang berlaku saat ini. Jadi, misalkan ukuran font sekarang adalah 14pt, 2em berarti 28pt, 2.5em (yup, bisa pecahan) berarti 35pt. Tidak percaya?

Kode: [Pilih]
<p style="font-size: 14pt;">Ini ukurannya 14pt.</p>
<p style="font-size: 2em;">2em sama dengan 28 pt.</p>
<p style="font-size: 2.5em;">2.5em sama dengan 35 pt.</p>
hasilnya
Kutip

Ini ukurannya 14pt.

2em sama dengan 28 pt.

2.5em sama dengan 35 pt.


ex
1ex adalah tinggi huruf x dalam sebuah font, biasanya setengah dari ukuran font itu sendiri. Coba tuliskan huruf besar dan satu x, kira-kira setengahnya kan?

pt
Ukuran ini yang biasanya kita gunakan di pengolah kata dan sebagainya kalau merujuk ukuran font. Mungkin sudah banyak yang tahu, satu point sama dengan 1/72 inci. Tidak percaya? Ayo buktikan: teks dengan ukuran 1in akan sama dengan 72pt:

Kode: [Pilih]
<p><span style="font-size: 1in;">Teks yang ukurannya 1in ini</span><span style="font-size: 72pt"> sama dengan 72pt.</span></p>

Coba sendiri hasilnya karena di forum ini teksnya menumpuk :P atau kalau malas, aku berikan teks yang pendek:

Kode: [Pilih]
<p><span style="font-size: 1in;">Teks ini</span><span style="font-size: 72pt"> sama.</span></p>
menghasilkan
Kutip

Teks ini sama.


pc
Ukuran ini mungkin agak jarang didengar, tapi disediakan oleh CSS. 1pc = 12pt. Buktikan sendiri yah :)

px
Seharusnya sudah pada tahu semua, 1px adalah satu titik pada layar komputer. Ukuran ini juga paling sering digunakan untuk memastikan ukuran suatu elemen pada layar, jadi tidak peduli resolusi layarnya, ukuran elemen tersebut akan tetap sama (tapi hati-hati kalau halamannya harus dicetak).

Tidak perlu dihapalkan semua, karena yang paling sering digunakan adalah %, pt, dan px.

Tunggu sebentar, itu ada tag baru ya? Apa itu <span>?
Judul: span dan div
Ditulis oleh: Èxsharaèn pada 31 Juli 2008, 04:10:07
Tidak perlu pusing dulu dengan <span>. Pengertian paling mudah, <span> digunakan untuk mengatur style di dalam suatu elemen. Jadi, pada contoh di atas, kita mengatur style beberapa kalimat (atau kata) di dalam sebuah paragraf. <span> digunakan untuk keperluan ini.

Nanti ada lagi tag yang lingkupnya lebih besar dari <span>, yaitu <div>. Tag ini akan mengelompokkan beberapa elemen yang terkandung di dalamnya, jadi kita bisa memberi style pada beberapa elemen sekaligus. Kita akan bahas <div> lebih lanjut pada topik layout situs nanti, jadi sementara lupakan dulu saja. Kita hanya akan pakai <span> sepanjang artikel CSS ini.

Lanjut!
Judul: Font dan Style (lanjutan)
Ditulis oleh: Èxsharaèn pada 31 Juli 2008, 04:54:24
Kembali lagi ke font dan style...

font-style
Nilainya hanya ada tiga: normal, italic, dan oblique. normal adalah nilai dasar. Kalau dicoba, sekilas tidak ada perbedaan antara italic dan oblique, karena dua-duanya menghasilkan teks miring:

Kode: [Pilih]
<p style="font-style: normal;">Font-style normal</p>
<p style="font-style: italic;">Font-style italic</p>
<p style="font-style: oblique;">Font-style oblique</p>
hasilnya
Kutip

Font-style normal

Font-style italic

Font-style oblique


font-variant
Hanya ada dua nilai: normal (dasar), dan small-caps. Tahu ya small caps?

Kode: [Pilih]
<p style="font-variant: normal;">Font-variant normal</p>
<p style="font-variant: small-caps;">Font-variant small-caps</p>
menghasilkan
Kutip

Font-variant normal

Font-variant small-caps


font-weight
Selector ini mendefinisikan ketebalan huruf. Nilainya antara 100 hingga 900 (hanya kelipatan 100), atau nilai relatif: normal, bold, bolder, lighter. 400 sama dengan normal sementara 700 sama dengan bold.

Untuk mencoba kode ini, ukuran hurufnya harus diperbesar supaya kelihatan bedanya. Daripada mendefinisikan seluruh <p> dengan selector font-size, kita bisa minta bantuan tag <div>.

Kode: [Pilih]
<div style="font-size: 36pt;">
<p style="font-weight: normal;">Teks normal.</p>
<p style="font-weight: bold;">Teks tebal.</p>
<p style="font-weight: bolder;">Teks agak tebal.</p>
<p style="font-weight: lighter;">Teks agak tipis.</p>
</div>
akan menghasilkan
Kutip

Teks normal.

Teks tebal.

Teks agak tebal.

Teks agak tipis.


Mungkin bold dan bolder serta normal dan lighter agak nggak kentara bedanya :)

font
Ini adalah shorthand untuk kelima selector di atas. Kalau menggunakan selector ini, urutannya adalah:

font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar

Tidak harus semuanya dipakai. line-height adalah jarak antarbaris, nilainya bisa menggunakan unit apa saja. Semua properti di belakang font-family diisi dengan nama font yang diinginkan untuk, secara berturut-turut: elemen yang punya teks (tombol, menu, dll.), label ikon, menu tarik-jatuh (dropdown menu), kotak pesan, dan status bar perambah. Entah kenapa small-caption tidak ada keterangannya di W3schools...

Contoh, untuk font Arial 24pt, style lengkapnya seperti ini:
Kode: [Pilih]
<p style="font: 24pt Arial,sans-serif;">Teks Arial 24pt</p>
Hasilnya:
Kutip

Teks Arial 24pt


Itu untuk font. Berikutnya, kita akan utak-atik teks kita dengan berbagai macam style.
Judul: Teks
Ditulis oleh: Èxsharaèn pada 22 Agustus 2008, 02:29:40
Nah, setelah main-main dengan font, sekarang kita main-main dengan teks. Bisa diapakan saja sih teks kita?

color
Ini mungkin properti yang paling ditunggu-tunggu. Yup, properti ini akan mengubah warna teks kita dari hitam menjadi apapun yang kita mau! Kombinasi warnanya adalah 2563 dari putih murni ke hitam murni. Jadi, gimana pakainya nih?

Kode: [Pilih]
<p style="color:red;">Teks ini warnanya merah.</p>
<p style="color:#FF0000;">Teks ini warnanya juga merah.</p>

Hasilnya:

Kutip

Teks ini warnanya merah.

Teks ini warnanya juga merah.


Nah, gimana caranya tuh? Kok value-nya beda tapi hasilnya sama?

Cara pertama adalah menggunakan nama warna dalam bahasa Inggris. Ada red, yellow, white, black, green, blue, dan lain-lain (cari sendiri :P).

Cara kedua, kalau ingin menggunakan warna yang agak tidak standar, ya kita harus membuatnya sendiri. Komposisi warna pada layar komputer pada dasarnya terdiri dari 3 warna: Red, Green, Blue. (Note: Yang dapat pelajaran seni rupa tidak boleh protes ;D karena di seni rupa, tiga warna dasar adalah Cyan, Magenta, dan Yellow). Cara mencampurnya?

Cara termudah adalah menggunakan Paint. Buka saja menu Colors > Edit Colors.... Tekan tombol Define Custom Colors >> untuk melebarkan jendela warna. Sekarang, silakan pilih warna yang diinginkan dan catat baik-baik nilai Red, Green, dan Blue. Langkah berikutnya, ubah ketiga nilai tersebut ke dalam heksadesimal secara berurutan (jangan dibolak-balik). Tahu ya caranya?

Untuk mengubah desimal ke heksadesimal: bagi terus dengan 16 (sambil dicatat sisa pembagiannya) sampai tidak bisa dibagi lagi, lalu baca semua sisanya dari sisa terakhir.
Untuk kasus kita sekarang, karena nilai maksimalnya hanya 255, pembagiannya jadi mudah. Cukup bagi sekali saja (jangan buang sisanya). Angka heksadesimalnya adalah hasil pembagiannya diikuti hasil sisa pembagiannya. Kemudian, karena heksadesimal memiliki 16 angka, ubah dulu angka-angka berikut menjadi huruf: 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, dan 15 = F. Contoh!
212 --> 212 / 16 = 13 sisa 4. Berarti angka heksadesimalnya adalah D4 (13 = D)

Tidak mau ribet? Gunakan saja Calculator ;D pastikan mode Scientific aktif, lalu ketikkan angka desimal kita, dan klik Hex. Jadi deh!

Value ini berlaku untuk semua properti yang berurusan dengan warna, jadi diingat-ingat yah :)

direction
Ini sudah pernah dicontohkan dan mungkin kita akan jarang pakai (kecuali ada yang menulis bahasa Arab atau bahasa apapun yang ditulis dari kanan ke kiri). Value-nya hanya ada dua: ltr (left-to-right, normalnya) dan rtl (right-to-left).

line-height
Gampangannya, ini mengatur jarak antarbaris (berapa spasi kalau kita bicara di Word). Nilainya bisa menggunakan angka biasa atau menggunakan unit. 100% di sini merujuk pada ukuran font terakhir yang digunakan. Kalau angka biasa yang digunakan, artinya jarak antarbaris dihitung dengan mengalikan angka tersebut dengan ukuran font terakhir yang digunakan (mirip %).

Contoh:

Kode: [Pilih]
<p>Paragraf satu</p>
<p>Paragraf dua, jarak antarbarisnya normal.</p>
<p style="line-height:2;">Paragraf tiga, jarak antarbarisnya dua kali ukuran font sekarang.</p>
<p style="line-height:1in;">Paragraf empat, jarak antarbarisnya satu inci. Jauh amat ya???</p>
<p style="line-height:500%;">Paragraf lima, jarak antarbarisnya 500%. Lebih jauh lagi...</p>

Hasilnya:

Kutip

Paragraf satu

Paragraf dua, jarak antarbarisnya normal.

Paragraf tiga, jarak antarbarisnya dua kali ukuran font sekarang.

Paragraf empat, jarak antarbarisnya satu inci. Jauh amat ya???

Paragraf lima, jarak antarbarisnya 500%. Lebih jauh lagi...

Judul: Teks (lanjutan)
Ditulis oleh: Èxsharaèn pada 22 Agustus 2008, 03:40:16
letter-spacing
Mudah saja, ini adalah jarak antarhuruf. Nilainya menggunakan unit.

text-align
Properti ini mengatur perataan teks: left, center, right, atau justify. Pengguna sejati Word tidak perlu mencoba properti ini :D

text-decoration
Jangan berpikiran dekorasi yang macam-macam ;D dekorasi yang bisa diberikan adalah none, underline (pengganti tag <u>), overline, line-through (bahasa lainnya strikethrough, pengganti tag <s>), atau blink. Khusus yang terakhir tidak berjalan di semua perambah, jadi silakan dites dulu di berbagai perambah :)

text-indent
   Tahu ya indentasi? Itu seperti yang terjadi pada paragraf ini. Normalnya sih kita cenderung akan pakai Tab untuk melakukan indentasi. Andaikan ternyata kurang atau terlalu menjorok, properti ini bisa membantu kita mengatur indentasi yang diinginkan. Nilainya dalam unit, 100% merujuk pada lebar elemen induk yang dipengaruhi properti ini. Contoh:

Kode: [Pilih]
<p style="text-indent:1em">Paragraf ini diindentasi sejauh 1 em.</p>
<p style="text-indent:15%">Paragraf ini diindentasi sejauh 15% dari ukuran elemen induk, yaitu body. Karena body tidak memiliki properti width, dianggap ukurannya adalah 100% dari lebar layar perambah. Untuk melihat efek value ini, kecilkan ukuran jendela perambah.</p>
<p style="text-indent:-1em">Paragraf ini diindentasi sejauh 1 em ke kiri (nilai properti ini minus). Jadinya aneh kalau batas kirinya adalah batas kiri halaman ini...</p>
<div style="border-width:1pt; border-style:solid; border-color:black; text-indent:-1em; left:100px; position:relative; width: 600px;">...tapi andaikan paragraf ini ada di elemen yang kebetulan letaknya tidak di batas kiri halaman (seperti di elemen ini), efeknya dapat terlihat jelas. Mengubah posisi elemen akan diterangkan nanti.</div>

Abaikan sebentar properti-properti baru yang ada di blok div, nanti kita akan gunakan saat melakukan layout situs.

Hasilnya:

Kutip

Paragraf ini diindentasi sejauh 1 em.

Paragraf ini diindentasi sejauh 15% dari ukuran elemen induk, yaitu body. Karena body tidak memiliki properti width, dianggap ukurannya adalah 100% dari lebar layar perambah. Untuk melihat efek value ini, kecilkan ukuran jendela perambah.

Paragraf ini diindentasi sejauh 1 em ke kiri (nilai properti ini minus). Jadinya aneh kalau batas kirinya adalah batas kiri halaman ini...

...tapi andaikan paragraf ini ada di elemen yang kebetulan letaknya tidak di batas kiri halaman (seperti di elemen ini), efeknya dapat terlihat jelas. Mengubah posisi elemen akan diterangkan nanti.

Keterangannya jadi tidak valid karena kebetulan sekali hasilnya ditampung di sebuah <div> lain, jadi pastikan coba di halaman baru :)

text-transform
Properti ini akan mengubah teks kita dalam suatu elemen yang punya properti ini menjadi capitalize (Semua Huruf Pertama Dibesarkan, Atau Istilah Lainnya Titlecase), uppercase (SEMUA HURUF MENJADI HURUF BESAR), lowercase (semua huruf menjadi huruf kecil), atau none (normal). Contoh:

Kode: [Pilih]
<p style="text-transform:capitalize;">paragraf ini Dikapitalisasi. aku sengaja melanggar kaidah bahasa indonesia...</p>
<p style="text-transform:uppercase;">paragraf ini ditulis dengan UPPERCASE, tidak PEDULI baGaimANa aku meNULIsnyA.</p>
<p style="text-transform:lowercase;">PARAGRAF INI DITULIS DENGAN lowercase, tidak PEduLI sebERapA nGawuR aku MenULIsnyA.</p>
<p style="text-transform:none;">Jangan nulis AcAk-ACakAn di paragraf ini, tidak ada transformasinya!!!</p>

akan menghasilkan

Kutip

paragraf ini Dikapitalisasi. aku sengaja melanggar kaidah bahasa indonesia...

paragraf ini ditulis dengan UPPERCASE, tidak PEDULI baGaimANa aku meNULIsnyA.

PARAGRAF INI DITULIS DENGAN lowercase, tidak PEduLI sebERapA nGawuR aku MenULIsnyA.

Jangan nulis AcAk-ACakAn di paragraf ini, tidak ada transformasinya!!!


white-space
Eee... ini tidak ada terjemahannya di bahasa Indonesia, jadi sepertinya langsung contoh saja biar jelas. Perhatikan bahwa teks pada paragraf pertama dan kedua sama persis cara penulisannya.

Kode: [Pilih]
<p style="white-space:pre;">Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P</p>
<pre>Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P</pre>
<p style="white-space:nowrap;">Paragraf ini ditulis dengan property <strong>white-space</strong> yang diberi nilai <strong>nowrap</strong>. Sepanjang apapun tulisannya, paragraf ini tidak akan pernah turun baris, namun akan terus memanjang ke samping hingga paragrafnya berhenti. Jangan panjang-panjang, kasihan yang baca topik ini nanti :D</p>

Heemmm...

Kutip

Ini adalah sebuah paragraf yang formatnya agak ... acak-acakan :P

Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P

Paragraf ini ditulis dengan property white-space yang diberi nilai nowrap. Sepanjang apapun tulisannya, paragraf ini tidak akan pernah turun baris, namun akan terus memanjang ke samping hingga paragrafnya berhenti. Jangan panjang-panjang, kasihan yang baca topik ini nanti :D


Kita sekaligus kenalan dengan satu tag baru: <pre>. Tag ini akan membiarkan teks yang berada di dalamnya diformat apa adanya. Normalnya, spasi berlebih akan dihilangkan, namun dengan <pre> semua spasi ekstra itu dibiarkan. Font-nya memang Courier New, nilai dasar di semua perambah :)

Terakhir!

word-spacing
Mirip letter-spacing, tapi ini berlaku untuk kata. Nilainya dalam unit. Silakan utak-atik sendiri ;D

Oke! Kita selesai dengan font dan teks. Apa? Kurang bagus hasilnya? Masih ingin memperindah halaman Web-nya? Artikel berikutnya akan membahas bagaimana kita mengganti background halaman Web kita, seperti yang terlihat di situs RPGFWID dan kebanyakan profil Friendster. Penasaran?
Judul: Background
Ditulis oleh: Èxsharaèn pada 07 September 2008, 06:32:23
Berikut ini kita akan pelajari senjata ampuh para pemilik profil Friendster yang suka mengganti-ganti gambar latar (background) profilnya. Dengan apa mereka melakukannya? CSS :)

Catatan: Seluruh contoh di bawah ini akan aku aplikasikan ke tag <div> berukuran 100 x 100, walaupun seharusnya yang diutak-atik oleh profil Friendster adalah tag <body>. Tapi, kode aku berikan untuk tag <body>. Selain itu, ganti seluruh URL gambar dengan gambar kesukaan sendiri, karena aku yakin nggak semua orang punya gambar yang sama.

background-image
Inilah tersangka utama yang bisa mengubah-ubah gambar latar kita ;) Tinggal isi value-nya dengan format url(url_gambar_kita). Masih ingat ya dengan URL relatif dan absolut?

Contoh! Sori aku lagi nggak ada gambar lain, jadi contohnya pakai ini aja yah :P

Andaikan aku mau pakai gambar ini sebagai gambar latar:
(http://forum.rpgfantasy.web.id/index.php?action=dlattach;attach=32;type=avatar)
(ukurannya hanya 64 x 64, disengaja untuk ilustrasi berikut)

Kodenya:

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg);"></body>

Hasilnya:
Kutip

Kalau-kalau ada yang ngintip source halaman ini, mungkin ada yang bingung. Gambar kok URL-nya seperti ini: http://forum.rpgfantasy.web.id/index.php?action=dlattach;attach=32;type=avatar Mana gambarnya? Well, menggunakan bahasa pemrograman sisi-server (server-side programming), kita bisa saja membuat halaman yang mengeluarkan gambar. Ini nanti akan dibahas di topik lebih lanjut Buat Web Yuk! (PHP + MySQL).

Hmm... kalau gambarnya lebih kecil dari ukuran elemen yang dikasih gambar latar, ternyata dia otomatis mengulang diri sendiri. Gimana kalau aku ingin gambarnya nggak berulang? Atau hanya berulang ke satu arah saja?

background-repeat
Properti ini mengatur perulangan gambar kita. Kita bisa atur apakah gambar kita akan repeat (diulang ke segala arah), repeat-x (diulang ke arah sumbu x saja, i.e. kiri-kanan saja), repeat-y (diulang ke arah sumbu y saja, i.e. atas-bawah saja), atau no-repeat (tidak diulang sama sekali).

Untuk ilustrasi properti ini, kita harus gabungkan dengan satu properti lagi untuk melihat efeknya.

background-position
Nah, andai saja kita ingin mengatur posisi awal gambar latar kita, tinggal atur properti ini. Mau di top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, atau pada koordinat tertentu xpos ypos atau x% y%.

Untuk 9 posisi pertama tadi, andaikan hanya satu kata pertama saja yang digunakan, CSS akan otomatis menggunakan center untuk posisi berikutnya. Kalau tidak digunakan, nilai yang digunakan adalah top left alias 0% 0%.

Untuk posisi x% y%, x% menunjukkan posisi horizontal, relatif terhadap elemen yang diberi gambar latar. Misal ukurannya 100px dan aku memberikan 5% untuk x%, maka posisi sesungguhnya gambar itu ada di 5px. Sementara itu, y% menunjukkan posisi vertikal, relatif terhadap elemen yang diberi gambar latar. Posisi 0% 0% sama dengan top left sedangkan posisi 100% 100% ada di bottom right. Kalau hanya nilai pertama yang diberikan, nilai kedua otomatis diisi 50%.

Untuk posisi xpos ypos, ini mudah sekali karena mirip dengan sumbu Cartesius biasa, hanya saja 0 0 ada di kiri atas (top left) dan y ke bawah bernilai positif. Kalau nilai pertama tidak diberikan, nilai kedua akan diisi 50%. Baik xpos dan ypos bisa diisi dengan unit, termasuk %.

Nah, sekarang kita bisa coba berbagai variasi pengaturan background-repeat. Semua contoh di bawah ini menggunakan gambar yang sama dengan di atas, dengan elemen <div> berukuran lebih besar, yaitu 192 x 192 (persis 3 x 3 lebih besar dari ukuran gambar latar). Kalian silakan coba saja di <body> :)

Kita coba otak-atik perulangannya dulu.

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat;"></body>

Hasilnya:

Kutip

Yang ini:

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat-x;"></body>

akan menghasilkan:

Kutip

Terlihat kan, dia hanya diulang ke arah samping? Bisa ya coba sendiri untuk repeat-y :)

Kalau tidak diulang seperti ini:

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:no-repeat;"></body>

jadinya ya...

Kutip

Nah, coba gambarnya kupindah ke... tengah-tengah:

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat;"></body>

Jadinya:

Kutip

Oke deh, kali ini giliran repeat-y...

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:repeat-y;"></body>

Hasilnya:

Kutip

Tujuh posisi lainnya bisa dicoba-coba sendiri :)

background-color
Andaikan gambar kita ternyata lebih kecil dari ukuran elemen, kan terlihat ada sisa elemen yang berwarna putih (default). Kalau terlihat jelek atau tidak cocok, warna putih itu bisa diganti ke warna lain menggunakan properti ini. Masih ingat ya tentang warna?

Contoh! Kalau aku ingin mengisi area yang kosong dari DIV-ku (yang ukurannya tetap 192 x 192 dan gambarnya kuletakkan di tengah-tengah tanpa perulangan) dengan warna hitam, kodenya seperti ini:

Kode: [Pilih]
<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat; background-color:black;"></body>

Hasilnya:

Kutip

Properti ini sebaiknya disiapkan dengan nilai warna yang dominan dari warna gambar latar, andaikan saja tiba-tiba terjadi sesuatu pada gambar latar (hilang).

background-attachment
Pernah lihat halaman yang cukup panjang sehingga kita harus menggulir halamannya ke bawah, tapi gambar latarnya tidak ikut bergerak? Pembuat halamannya menggunakan properti ini, yang diset ke fixed agar gambarnya tidak bergerak. Jika diabaikan, nilai dasarnya adalah scroll, yang berarti gambarnya ikut bergerak. Contohnya lihat saja di situs RPGFWID (http://www.rpgfantasy.web.id), itu menggunakan properti ini yang diset ke fixed.

background
Kalau tidak ingin repot-repot menggunakan semua properti di atas, kita bisa menggunakan shorthand background, dengan urutan background-color background-image background-repeat background-attachment background-position. Tidak semua harus digunakan.

Selesai! Untuk pencinta Friendster, seluruh variasi sudah diberikan di sini untuk mengkustomisasi profil. Tapi, artikel ini belum selesai di sini. Perjalanan kita masih belum berakhir! Berikutnya, aku akan berikan cara untuk membuat tepian (border) seperti yang sudah tampak pada contoh-contoh di atas.
Judul: Re:Buat Web yuk! (XHTML + CSS)
Ditulis oleh: Bagus Cahyo Jaya Pratama pada 04 Oktober 2012, 12:45:40
Kelihatannya mudah tetapi sulit  dipraktekkan untuk membuat sebuah website.
Judul: Re:Buat Web yuk! (XHTML + CSS)
Ditulis oleh: Èxsharaèn pada 07 Oktober 2012, 10:35:05
Untuk sekarang, sebenarnya nggak susah untuk buat website, karena sudah banyak alat-alat praktis, misalkan saja Adobe Dreamweaver, Microsoft Visual Web Developer, bahkan CMS seperti joomla!, jadi sudah tidak perlu melakukan HTML dan CSS manual. Tapi memang ada kalanya lebih enak mengedit HTML/CSS langsung, apalagi kalau sudah dicampur dengan pemrograman Web (PHP, ASP.NET, JavaScript, dll.)